привязки данных опции к тексту не работает в jsviews-jqueryui-виджетов

Question

Если используется selectmenu и привязка данных к варианту текста, как это:

{^{selectmenu selectedAlbum}} 
    <option value="-">Please select</option> 
    {^{for albums}} 
     <option data-link="value{:id} {:name} selected{:id == ~root.selectedAlbum}">               </option> 
    {{/for}} 
{{/selectmenu}} 

И связать «имя» свойства, как так:

<input data-link="albums[selectedAlbum].name" /> 

Итак, изменив свойство «name», измените DOM Elements, но виджет не обновится.

Возможно, я что-то не так?

example code in fiddle

Answer 1

В JQuery UI selectmenu виджет скрывает <option> и <select> элементы, а вместо этого использует <li> элементы для отображения списка опций. Также он не прослушивает изменения в элементах <option>. Поэтому, когда элементы опции меняются, это изменение не отражается в отображаемом <li>.

Если вы используете обычный элемент <select>, то ваш сценарий будет работать. Но если вы хотите использовать jQuery UI selectmenu, вам нужно принудительно обновить.

Вот один из способов сделать это:

$.observable(app.albums).observeAll(function() { 
    // Refresh the view if albums change 
    $.view("#content").get(true, "selectmenu").parent.refresh(); 
}); 

См:

• http://jsfiddle.net/BorisMoore/xh9r8afd/ для обновленной версии вашего jsfiddle
• http://www.jsviews.com/#jsvviewobject@refresh - документация
• http://www.jsviews.com/#viewobject@get - документация