1

我正在尝试将Bootstrap 弹出窗口集成到我的 Tapestry 5.4-alpha-14 应用程序中。我是 Tapestry 的新手，我不知道如何在那里使用 javascript。

我的问题是，当区域刷新时，我想在区域循环中的每个元素上显示 Bootstrap 弹出框。首先我在区域中没有元素，然后用户提交一个表单并加载一个元素，然后再进行一些用户交互，并加载另一个元素，依此类推...我想在每个加载的元素上显示弹出框在循环。使用下面的代码，我只能在加载第一个元素时显示弹出框，但是当加载第二个元素时，弹出框丢失了。我还注意到在第二次加载时没有调用 .js 代码。

.tml 代码的一部分：

<t:zone t:id="selectedPagesZone" id="selectedPagesZone">
 <div class="well" t:type="Loop" t:id="selectedLoop" t:source="selectedPages" t:value="item">
    <div class="pop" data-toggle="popover" rel="popover" data-placement="top"  data-container="body" data-content="Content" title="Title">
        ...
     </div>
   </div>
</t:zone>

.java 代码的一部分：

void onSuccess() {
...
ajaxResponseRenderer.addRender(selectedPagesZone).ajaxResponseRenderer.addCallback(new JavaScriptCallback() {
   public void run(JavaScriptSupport javaScriptSupport) {
      javaScriptSupport.require("popover");
    }
});

popover.js 代码：

(function ($) {
options = {
    placement:'right',
    trigger: 'hover',
    container: 'body',
    html: true
  }
$('.pop').popover(options);
$('.pop').popover('show');
})(window.jQuery);

我将不胜感激您能给我的任何帮助。

4

1 回答 1

2

require.js 只会执行一次你的 js 的主体。您应该定义一个配置一次但多次执行的函数。

popover.js

define(["jquery"], function($) {
    var privateFunc = function(args) {
        options = {
            placement:'right',
            trigger: 'hover',
            container: 'body',
            html: true
        };
        $('.pop').popover(options);
        $('.pop').popover('show');
    };
    return { publicFunc: privateFunc};
});

爪哇代码

ajaxResponseRenderer.addCallback(new JavaScriptCallback() {
    public void run(JavaScriptSupport javaScriptSupport) {
        JSONObject args = new JSONObject("foo", "bar");
        javaScriptSupport.require("popover").invoke("publicFunc").with(args);
    }
});

请参阅此处了解更多信息

于 2013-09-16T14:45:03.937 回答