Javascript 通过ajax tapestry 5加载脚本

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

DirectoryViewer使用区域显示MediaViewer，如下所示：

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

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

 <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>

这也很好。不要刷新整个页面，这一点很重要 在选择不同的文件之间进行切换，因为这将非常令人恼火

然后，MediaViewer有3个块，这些块被委托给一个方法 检查介质的类型。目前，这可以是文本、pdf或 图像。如果是图像，我想 使用javascript库提供缩放功能等

在这之前一切都很好

因此，当选定的文件是图像时，块将被更改 根据介质类型的不同，图像的外观如下所示：

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

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

 <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>

使用鼠标滚轮缩放焦点
放大
缩小
重置

块内的脚本不会运行。看起来（当我查看源代码时），脚本不在那里。但是，如果我按CTRL+F5，整个页面会再次加载，现在脚本就在那里，并且会运行。因此，当脚本从ajax区域返回时，它似乎没有被执行。这可能是因为onActioNFromFileSelection如何返回媒体查看器的主体，也可能是因为它已被剥离，或者eval（）需要调用浏览器来拾取它。我不确定，我真的被这件事缠住了

我已经尝试寻找了很长时间，但我似乎找不到原因： 1） 在通过单击文件加载区域后，该脚本不会出现在视图源中，但块的其余部分会出现。 2） 然后javascript会显示我是否刷新页面，并加载。我认为这可能是因为它在最初加载时包含在页面中，而不是在之后添加

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

---

谢谢，

我做了一点可怕的修改。我相信有更好的办法

我将上下文layout/js/jquery.mousewheel.run.js更改为一个只在调用时运行的函数，并将其命名为“addImageScript”。然后，我使用以下方法导入脚本，使其始终位于头部（不考虑块）：

@Import(library={
        "context:layout/js/jquery.min.js",
        "context:layout/js/jquery.panzoom.js",
        "context:layout/js/jquery.mousewheel.js",
        "context:layout/js/jquery.mousewheel.run.js",
})

现在，我需要做的就是确保在选择了应该显示图像的块时调用该脚本。如果我在AJAX响应中有效地包含了我之前的内容：

<script> addImageScript() </script>

它可以工作，但这很可怕，因为这意味着每次加载页面时都会加载额外的js文件。如果有人有更好的解决方案，我会接受任何更好的答案并投票

试试这个：

@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);
        }
    });
}