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

【问题标题】：JsViews: in-line template syntax for direct linked form elementJsViews：直接链接表单元素的内联模板语法
【发布时间】：2015-10-22 23:11:16
【问题描述】：

我看到了一个使用 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 标记已正确绑定到对象，但我找不到一个工作示例，说明如何在不将整个表单封装在另一个模板中的情况下内联引用已编译的模板。可以在模板之外使用数据链接语法，这让我们希望可以使用正确的语法。

这可能吗？

【问题讨论】：

标签： templates inline jsviews

【解决方案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>

【讨论】：