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/

Вот проблема: только первый элемент имеет текст в раскрывающемся списке выбора! Все выглядит правильно подключенным, хотя я не нашел каких-либо примеров Super-Simple или Concise привязки данных к элементу формы SELECT html, так что, возможно, я пропустил что-то, когда вы сгибаете ближайший возможный матч в эту попытку?

Информация о форе: Цель состоит в том, чтобы вытащить доступные элементы для нескольких выпадающих списков в виде JSON и наполнить их дискретными словарными массивами в элементе «app.selections», привязать к ним данные и сохранить их пользовательские значения в объекте "app.formData", который я буду POSTING как 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> 

(как показано в ответ на этот вопрос:. https://stackoverflow.com/a/18154317/1054484)

Смотрите также последний пример здесь: http://www.jsviews.com/#jsvplaying

Вот исправленная версия вашего jsfiddle: http://jsfiddle.net/BorisMoore/8dwdkp2d/.

Обратите внимание, что этот синтаксис позволит вам динамически обновлять отображаемые значения Name и Value; Попробуйте изменить значение текстового поля в моей версии jsfiddle.

Альтернативный синтаксис, если вам не нужно динамически обновлять значения Name и Value является:

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

Для понимания синтаксиса выражений данных ссылок см http://www.jsviews.com/#linked-elem-syntax