Datenoption Bindung an Text arbeiten nicht in jsviews-jQueryUI-Widgets

Question

Wenn verwendet selectmenu und Binden von Daten an Option Text wie folgt aus:

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

Und binden Eigenschaft "name" wie folgt:

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

Wenn Sie also die Eigenschaft "name" ändern, ändern Sie DOM Elements, aber das Widget wird nicht aktualisiert.

Vielleicht mache ich etwas falsch?

example code in fiddle

Answer 1

Das Widget selectmenu jQuery UI versteckt die <option> und <select> Elemente und verwendet stattdessen <li> Elemente die Liste der Optionen zu zeigen. Es hört auch nicht auf Änderungen in den <option> Elementen. Wenn sich die Optionselemente ändern, wird die Änderung nicht in den angezeigten <li> s angezeigt.

Wenn Sie ein normales <select> Element verwenden, wird Ihr Szenario funktionieren. Wenn Sie jedoch das jQuery UI-Auswahlmenü verwenden möchten, müssen Sie die Aktualisierung erzwingen. Hier

ist eine Möglichkeit, das zu tun:

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

See:

• http://jsfiddle.net/BorisMoore/xh9r8afd/ für eine aktualisierte Version Ihres jsfiddle
• http://www.jsviews.com/#jsvviewobject@refresh - Dokumentation
• http://www.jsviews.com/#viewobject@get - Dokumentation