JsViews：数据链接到 <select> ... <option> ... 的语法是什么？

Question

var app = {
    selections: {
        things: [
            { Name: "name1", Value: "thingValue1" },
            { Name: "name2", Value: "thingValue2" },
            { Name: "name3", Value: "thingValue3" }
        ],
        places: [
            { Name: "place1", Value: "placeValue1" },
            { Name: "place2", Value: "placeValue2" },
            { Name: "place3", Value: "placeValue3" }
        ]
    },
    formData: {
        selectedThing: "thingValue1",
        selectedPlace: "placeValue1"
    }
};

var template = $.templates("#theTmpl");

template.link("#content", app);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.jsviews.com/download/jsviews.js"></script>


<div id="content"></div>

<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} text{:Name}} selected{:formData.selectedThing}}"></option>
        {{/for}}
    </select>
    <select id="placeChoice" data-link="formData.selectedPlace">
        <option value="-">Please select</option>
        {^{for selections.places}}
        <option data-link="{value{:Value} text{:Name}} selected{:formData.selectedPlace}}"></option>
        {{/for}}
    </select>
</script>

在这个 jsfiddle 中，我试图将我的几个项目列表与我将发布到服务器的数据结构分开： http://jsfiddle.net/hdra2e2d/1/

问题出在这里：选择下拉列表中只有第一项有文字！一切看起来都连接正确，虽然我还没有找到任何数据绑定到 SELECT html 表单元素的超级简单或简洁的例子，所以也许我在弯曲最近的可能时错过了一些东西与这次尝试匹配吗？

背景细节：目的是获取多个下拉列表的可用项目作为 JSON 并将它们填充到 "app.selections" 成员内的离散字典数组中，data-link 到它们并将用户选择的值存储在 "app.formData" 对象中，我将把它作为 JSON 发布到服务器。

Answer 1

你的语法

<option data-link="{value{:Value} text{:Name}} selected{:formData.selectedThing}}"></option>

很奇怪。那个是从哪里来的？您似乎采用了与此问题相同的错误语法：jsViews - how do I set selected option from data.

该选项的正确语法是

<option data-link="value{:Value} {:Name} selected{:~selected === Value}"></option>

（如该问题的答案所示：。）

另请参阅此处的最后一个示例：http://www.jsviews.com/#jsvplaying

这是您的 jsfiddle 的更正版本： http://jsfiddle.net/BorisMoore/8dwdkp2d/.

请注意，此语法允许您动态更新显示的 Name 和 Value 值；尝试更改我的 jsfiddle 版本中的文本框值。

如果您不需要动态更新 Name 和 Value 值，另一种语法是：

<option value="{{:Value}}" selected="{{:~selected === Value}}">{{:Name}}</option>

要了解 data-link 表达式的语法，请参阅 http://www.jsviews.com/#linked-elem-syntax

JsViews：数据链接到 <select> ... <option> ... 的语法是什么？

JsViews: What is the syntax for data-linking to <select> ... <option> ...?

jsviews

drop-down-menu