JsViews：直接链接表单元素的内联模板语法

Question

我看到了一个使用 JsViews 直接 linking 到表单元素的示例，我发现它比将整个表单封装在模板中更可取。这是我正在尝试做的部分工作的 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>

data-linked INPUT 标记已正确绑定到对象，但我找不到如何在不将整个表单封装在另一个模板中的情况下内联引用已编译模板的工作示例。可以在模板之外使用 data-link 语法，这给了我们希望使用正确的语法成为可能。

这可能吗？

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：直接链接表单元素的内联模板语法

JsViews: in-line template syntax for direct linked form element

templates

inline

jsviews