15

我想知道如何将 JSF 托管 bean 属性传递给 JavaScript 函数。

像这样的东西：

<script>
  function actualizaMenu(key){
    #{linkedMenu.setKey(key)}
  }
</script>

<ul>
  <ui:repeat value="#{moduleList.modulos}" var="entity">
    <li>
      <a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>
    </li>
  </ui:repeat>
</ul>
4

3 回答 3

28

这并不完全是 JSF 变量的“传递”。这只是打印 JSF 变量，就好像它们是 JavaScript 变量/值一样。要知道，JSF 和 JS 根本不同步运行。JSF 在网络服务器中运行并生成 HTML/CSS/JS 代码，一旦到达那里，这些代码又在网络浏览器中运行。

您的具体问题很可能是因为您编写 JSF 代码的方式会生成无效的 JS 语法。验证这一点的简单方法是检查 JSF 生成的 HTML 输出，您可以通过右键单击找到该输出，在浏览器中查看源代码，并检查您是否在浏览器中的 JS 控制台中没有看到任何语法错误报告，您可以在 Chrome/IE9+/Firefox23+ 中按 F12 查找。

想象一下，#{entity.key}这里

<a onclick="actualizaMenu(#{entity.key})">#{entity.nombre}</a>

打印一个 Java 字符串变量"foo"，然后生成的 HTML 看起来像

<a onclick="actualizaMenu(foo)">some name</a>

但是，你看，它代表一个名为的 JavaScript变量foo，而不是一个 JS 字符串值！所以如果你真的想最终成为

<a onclick="actualizaMenu('foo')">some name</a>

那么您应该指示 JSF 准确生成该 HTML：

<a onclick="actualizaMenu('#{entity.key}')">#{entity.nombre}</a>

不过要注意 JSF 变量中的特殊字符。您可以为此使用OmniFacesof:escapeJS()功能。

与具体问题无关，具体实现actualizaMenu()毫无意义。您似乎正在尝试设置 bean 属性。您不应该为此使用 JS，而是使用 a <h:commandLink>。

<h:commandLink value="#{entity.nombre}" action="#{linkedMenu.setKey(entity.key)}" />

如有必要，嵌套 a<f:ajax>以使其异步。

于 2013-02-05T13:56:06.617 回答
1

我建议使用 jQuery 的事件绑定和元素上的 data 属性来获得相同的结果（假设您使用 jQuery）：

<script>
  function actualizaMenu(key){
    /* Logic here ... */
  }

  $(document).ready(function(){
    $('.menuItem').click(function(){
      var key = $(this).data('key');
      actualizaMenu(key);
    );
  });
</script>

...

<ul>
  <ui:repeat value="#{moduleList.modulos}" var="entity">
    <li>
      <a data-key="#{entity.key}" class="menuItem">#{entity.nombre}</a>
    </li>
  </ui:repeat>
</ul>

而且，正如在其他地方指出的那样，除非#{linkedMenu.setKey(key)}实际上返回了一段 javascript（这不太可能，而且即使它确实会很糟糕），您还需要修复该函数。

于 2013-02-05T14:17:56.400 回答
1

我知道这个问题很老，但对于那些仍在寻找的人来说，还有一个选择。

如果您使用的是 primefaces，请尝试一下。 请求上下文

于 2014-04-15T20:41:17.763 回答