Question

我看到了一个使用JsViews直接链接到表单元素的示例，我发现它更适合将整个表单封装在模板中。这是我正在尝试做的一个jsfiddle示例，其中部分工作： http://jsfiddle.net/30jpdnkt/

var app = {
    selections: {
        things: [
            { Name: "thingName1", Value: "thingValue1" },
            { Name: "thingName2", Value: "thingValue2" },
            { Name: "thingName3", Value: "thingValue3" }
        ]
    },
    formData: {
        selectedThing: "thingValue1",
    }
};


//how do I reference this template in-line, outside of another wrapping template?
$.templates({
    theTmpl: "#theTmpl"
});

$("#content").link(true, app);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jsviews.com/download/jsviews.js"></script>


<script id="theTmpl" type="text/x-jsrender">
    <select id="thingChoice" data-link="formData.selectedThing">
        <option value="-">Please select</option>
        {^{for selections.things}}
        <option data-link="value{:Value} {:Name} selected{:~selected === Value}"></option>
        {{/for}}
    </select>
</script>

<div id="content">
    <!--this part works-->
    <input data-link="formData.selectedThing trigger=true"/>
    <!--this part does not display-->
    <span {{for data tmpl="theTmpl"/}}></span>
</div>

数据链接的INPUT标记正确绑定到对象，但我找不到一个如何在线引用已编译模板而不将整个表单封装在另一个模板中的工作示例。可以在模板之外使用数据链接语法，可以使用正确的语法来实现它。

这可能吗？

Answer 1

是的，这是可能的 - 这就是我所说的顶级数据链接。很快就会有新的文档主题，但同时你有这个样本：

http://www.jsviews.com/#samples/editable/toplevel-for

你的jsfiddle - 我更新了它以使其完全运作：http://jsfiddle.net/30jpdnkt/1/

<div id="content">
    <input data-link="formData.selectedThing trigger=true"/>
    <span data-link='{for tmpl="theTmpl"}'></span>
</div>

JsViews：直接链接表单元素

1 个答案: