如何将JSF管理的bean属性传递给JavaScript函数

Question

我想知道如何将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>

Answer 1

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

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

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

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

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

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

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

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

然后您应该指示JSF准确地生成HTML:

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

但是要注意JSF变量中的特殊字符。您可以使用OmniFaces of:escapeJS()函数。

---

与具体问题无关actualizaMenu()的具体实施毫无意义。您似乎试图设置一个bean属性。您不应该使用JS，而应该使用<h:commandLink>。

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

必要时嵌套一个<f:ajax>以使其异步。

Answer 2

我建议将事件绑定与jQuery和元素上的数据属性一起使用，以获得相同的结果（假设使用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（它不太可能缝合，即使缝合了也可能非常糟糕），否则您也需要修复该函数。

Answer 3

我知道这个问题已经过时了，但对于那些仍在寻找的人来说，还有其他选择。

如果你使用的是素数面，试试这个。请求上下文