Question

我在我的JSF facelets中添加了类似的内容：

<html xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
    <f:view>
        <h:head></h:head>
        <h:body>
            <todo-item
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id">
            </todo-item>
            ...
        </h:body>
    </f:view>
</html>

得到错误：

The prefix "v-bind" for attribute "v-bind:todo" associated with an element type "todo-item" is not bound.

我明白问题是什么。未在HTML元素上定义名称空间。但我怎么能这样？我尝试使用xmlns:p="http://xmlns.jcp.org/jsf/passthrough"，p:v-bind:todo和p:v-bind:key，但这是一个很长的镜头而且没有用。

Answer 1

我最终只是这样做：

<html xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:v-bind="http://xmlns.jcp.org/jsf/passthrough">
    <f:view>
        <h:head></h:head>
        <h:body>
            <todo-item
                v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key="item.id">
            </todo-item>
            ...
        </h:body>
    </f:view>
</html>

Answer 2

VUE和JSF2之间的婚姻是地狱般的。我想使用JSF2的facelets模板和模型绑定以及VUE的前端魔术

结束语：

xmlns:v-on="http://xmlns.jcp.org/jsf/passthrough"
xmlns:v-bind="http://xmlns.jcp.org/jsf/passthrough"

将JSF绑定到支持bean并绑定到vue以进行前端验证

<h:inputText a:placeholder="eMail" maxlength="17" value="#{LoginBean.email}" a:v-model="email"/>

使用vue绑定css类和条件渲染

<div class="button" v-bind:class="{ disabled: !login_enabled }">
    <span v-if="login_enabled">
        <h:commandLink action="#{LoginBean.submit}">
            <span class="button-title">Submit</span>
            <f:ajax execute="@form"/>
        </h:commandLink>
    </span>
    <span v-if="!login_enabled" class="button-title">Submit</span>
</div>

老实说，不确定这是我项目的正确途径。现在，它可以工作，稍后会看到。

无法在JSF facelets中使用VueJS属性前缀

2 个答案: