javascript - 通过ajax Tapestry 5加载脚本

Question

我有一个“DirectoryViewer”组件和一个“MediaViewer”组件我创建的。目录查看器将显示文件名列表。它内部有一个 MediaViewer 组件，负责显示最后选择的文件。这工作得很好。

DirectoryViewer 使用一个区域来显示 MediaViewer，如下所示:

<t:zone t:id="MediaViewZone" id="MediaViewZone">
    <t:MediaViewer fileToShow="fileToShow"/>
</t:zone>

当用户单击文件名链接时，fileToShow 会更新并然后该区域也会更新:它看起来像这样:

Object onActionFromFileSelection(File file) {
    this.fileToShow = file;
    return MediaViewZone.getBody(); // AJAX request, return zone's own body
}

这也很好。重要的是整个页面不刷新选择不同的文件之间，因为这会很烦人。

MediaViewer 有 3 个 block ，它们被委托(delegate)给一个方法来检查媒体类型。目前，这可以是文本、pdf 或一个图像。如果是图片的话我愿意使用 JavaScript 库提供缩放功能等。

到目前为止一切都很好。

所以当选择的文件是图像时， block 将会改变根据媒体类型，图像如下所示:

 <t:block id="image">
 <section id="focal">
     <h1>Use the mousewheel to zoom on a focal point</h1>
     <div class="parent">
         <div class="panzoom">
             <image src="${FileLink}"/>
         </div>
     </div>

     <div class="buttons">
         <button class="zoom-in">Zoom In</button>
         <button class="zoom-out">Zoom Out</button>
         <input type="range" class="zoom-range"></input>
         <button class="reset">Reset</button>
     </div>
     <script src="${context:layout/js/jquery.mousewheel.run.js}"></script>
 </section>
</t:block>

block 内的脚本不会运行。它看起来(当我查看源代码时)好像脚本不存在。但是，如果我按 CTRL + F5，整个页面会再次加载，现在脚本就在那里，并且它会运行。因此，当脚本从 ajax 区域返回时，它似乎没有被执行。也许这是因为 onActioNFromFileSelection 返回媒体查看器主体的方式，或者可能是因为它被删除了，或者可能是 eval() 需要调用浏览器来获取它。我不确定，而且我真的很困惑。

我尝试了很长时间，但似乎找不到原因:1) 该脚本不会出现在查看源代码中，但 block 的其余部分会出现 - 在通过单击文件加载区域后。2)如果我刷新页面，JavaScript就会显示并加载。我认为这可能是因为它在最初加载时包含在页面中，而不是在之后添加。

所以我的总体问题是，当显示图像 block 时如何加载此 javascript？

谢谢

Answer 1

试试这个:

@Inject
private AjaxResponseRenderer ajaxResponseRenderer;

@Inject
@Path("context:layout/js/jquery.mousewheel.run.js")
private Asset runLib;

Object onActionFromFileSelection(File file) {

    this.fileToShow = file;

    ajaxResponseRenderer.addRender(MediaViewZone);
    ajaxResponseRenderer.addCallback(new JavaScriptCallback() {

        @Override
        public void run(JavaScriptSupport javascriptSupport) {

            javascriptSupport.importJavaScriptLibrary(runLib);
        }
    });
}