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个块，这些块被委托给一个方法检查媒体类型。目前，这可以是文本，pdf或一个图像。如果是图像，我想使用javascript库来提供缩放功能等。

到目前为止，一切都很好。

因此，当选择的文件是图像时，块将被更改根据媒体类型，对于图像，它看起来像这样：

 <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返回Media Viewer的主体，或者这可能是因为它被剥离，或者eval（）需要调用浏览器来获取它。我不确定，我真的坚持这个。

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

所以我的整体问题是，如何在显示图像块时加载此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);
        }
    });
}

Answer 2

我用一点可怕的黑客修复了这个问题。我相信有更好的方法。

我将我的上下文：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>

然后它将无法工作，因为此调用永远不会执行。所以相反，我把它添加到我的委托方法：

javaScriptSupport.addScript("addImageScript()");

它有效，但这很糟糕，因为这意味着每次加载页面时都会加载额外的js文件。如果有人有更好的解决方案，我会接受任何更好的答案，并且会支持。

通过ajax tapestry加载脚本5

2 个答案: