jsViews-如何设置数据中的选定选项 [英] jsViews - how do I set selected option from data

问题描述

我有一个选择，它使用jsViews绑定到服务器中的某些值.我已经成功地显示了这些选项，但是我希望能够跟踪并将选择选项设置为我的JavaScript对象中的值.这是我的代码:

<select id="albumChoice" data-link="selectedAlbum">
    <option value="-">Please select</option>
    {^{for albums}}
    <option data-link="{value{:id} text{:name}} selected{:selectedAlbum}}"></option>
    {{/for}}
</select>

完整的示例代码在以下小提琴中: http://jsfiddle.net/4ZevT/

如您所见，我已经尝试使用selected {:selectedAlbum}，但是它什么也没做.我必须怎么做才能在页面加载到服务器中的值时自动设置该选项.

解决方案

此处有一个示例:

http://www.jsviews.com/#jsvplaying . (请参见本节末尾: 示例:数据链接到<select> ...以及更多... )

我在这里更新了您的小提琴: http://jsfiddle.net/4ZevT/2/

您在<option...上的数据链接语法有一些错误.我将其更新为:

<option data-link="value{:id} {:name} selected{:id == ~root.selectedAlbum}"></option>

所选绑定期望的是布尔值，而不是数字...

我必须设置selected{:id == ~root.selectedAlbum}而不是selected{:id === ~root.selectedAlbum}，因为您为ID使用数字值.如果将它们更改为字符串，则可以切换到===.

I have a select which is bound to some values from the server using jsViews. I have successfully managed to show the options but I want be able to track and set the select option to the value from my JavaScript object. This is my code:

<select id="albumChoice" data-link="selectedAlbum">
    <option value="-">Please select</option>
    {^{for albums}}
    <option data-link="{value{:id} text{:name}} selected{:selectedAlbum}}"></option>
    {{/for}}
</select>

The complete example code is in this fiddle: http://jsfiddle.net/4ZevT/

As you can see I have tried to use selected{:selectedAlbum} but that doesn't do anything. What must I do so that the option is automatically set when the page loads to the value from the server.

解决方案

There is an example here:

http://www.jsviews.com/#jsvplaying. (See at the end of the section: Sample: data-linking to <select>... and much more...)

I have updated your fiddle here: http://jsfiddle.net/4ZevT/2/

You syntax for data-link on the <option... has some errors. I updated it to:

<option data-link="value{:id} {:name} selected{:id == ~root.selectedAlbum}"></option>

The selected binding expects a Boolean, not a number...

I had to set selected{:id == ~root.selectedAlbum} rather than selected{:id === ~root.selectedAlbum} because you are using number values for you ids. If you change them to strings, you can switch to ===.

这篇关于jsViews-如何设置数据中的选定选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！