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

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>

In this jsfiddle, I am trying to separate my several item lists from the data structure I'll be POSTing to the server: http://jsfiddle.net/hdra2e2d/1/

Here is the problem: only the first item has text in the selection dropdown! Everything looks to be hooked up correctly, though I haven't found any Super-Simple or Concise examples of data-binding to a SELECT html form element so maybe I missed something when bending a nearest-possible match into this attempt?

background details: The intent is to fetch available items for several dropdown lists as JSON and stuff them into discrete dictionary-arrays within the "app.selections" member, data-link to them and have their user-selected values stored in the "app.formData" object which I'll be POSTing as JSON to the server.

Solution

Your syntax for

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

is very strange. Where did that come from? You seem to have taken the same erroneous syntax that was in this question: jsViews - how do I set selected option from data.

The correct syntax for the option is

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

(as shown in the answer to that question: https://stackoverflow.com/a/18154317/1054484.)

See also the last sample here: http://www.jsviews.com/#jsvplaying

Here is a corrected version of your jsfiddle: http://jsfiddle.net/BorisMoore/8dwdkp2d/.

Note that this syntax will allow you to dynamically update the displayed Name and Value values; Try changing the textbox value in my jsfiddle version.

An alternative syntax if you don't need to dynamically update the Name and Value values is:

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

For understanding the syntax for the data-link expressions, see http://www.jsviews.com/#linked-elem-syntax