Search code examples
jsrenderjsviews

data binding option to text not work in jsviews-jqueryui-widgets

If used selectmenu and bind data to option text like this:

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

And bind property "name" like so:

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

So when change the property "name" then change DOM Elements but widget does not refresh.

Maybe I'm doing something wrong?

example code in fiddle

Solution

  • The jQuery UI selectmenu widget hides the <option> and <select> elements and instead uses <li> elements to show the options list. Also it does not listen to changes in the <option> elements. So when the option elements change, the change is not reflected in the displayed <li>s.

    If you use a regular <select> element then your scenario will work. But if you want to use the jQuery UI selectmenu, you need to force the refresh.

    Here is one way to do that:

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

    See: