重新渲染 JSF 组件时如何重新应用 JS/jQuery document.ready？答案

【问题标题】：How to re-apply JS/jQuery document.ready when a JSF component is re-rendered?重新渲染 JSF 组件时如何重新应用 JS/jQuery document.ready？
【发布时间】：2013-05-07 22:22:48
【问题描述】：

我创建了一个日历组件，所有的 JS 都在document.ready 上应用到它。当我进行 Ajax 调用并重新渲染组件时，JS/JQuery 不再存在。这可以通过添加内联 JS 来解决，但会产生性能开销。重新渲染组件后如何重新应用我的 JS 行为？

我生成的 HTML 代码如下所示。

<div class="input-append date">
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input>
    <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"> </i>
    </span>
</div>

谢谢

【问题讨论】：

你能举几个例子吗？
通常人们会避开内联 js，因为它会阻止页面加载，从而阻塞资源请求并导致用户速度变慢，以及过去对 IDE 的支持不佳。听起来内联 js 对你来说更快，这是我绕过设计错误的一种方式。每样东西都有一个位置，所以你需要给出一个更详尽的例子来说明你何时/为什么使用它。
这与 JSF 有什么直接关系？请注意，在这种情况下，JSF 将仅充当 HTML 生成器，仅此而已。使用其他 Java Web 框架甚至使用 ASP.Net 或 PHP 等其他技术时，您可能会遇到相同的 JS 问题。
@David - robertnyman.com/2008/11/20/…
@Luiggi - 它仅与 JSF 有关，因为我正在使用 JSF 开发自定义组件。因为 JSF 有几种方法可以添加 JS（作为框架的一部分）并且由于 JSF/JS 库，我希望答案与此相关。另请注意，JSF 也可以渲染和/或绑定 JS。

标签： javascript jquery ajax jsf

【解决方案1】：

我认为在 Java 生成代码 (JSF) 中使用 javascript 的最佳实践是将它们组织成 JSF 复合组件。这是一个很好的可重复使用的做法。 JSF 2.0 版中包含的复合组件。

您可以查看Oracle tutorial 和这个BalusC 示例。

问候，

【讨论】：

【解决方案2】：

我想出的最接近的方法是在document.ready 上注册 ajax 回调并将 JS 应用于组件（要么应用于整个页面，要么获取呈现的 id 并将其应用于该页面）。如果能以某种方式开箱即用，那就太酷了。

 jsf.ajax.addOnEvent(function(data) {
         var ajaxstatus = data.status; 

         switch (ajaxstatus) {
             case "success": 
              alert('load the JS thing')
                 break;
         }
     });

【讨论】：

OmniFaces 有一个 <o:onloadScript> 用于此目的。