JsView Select 单击后不立即显示所选选项

Question

我运行遇到这样一种情况，其中 select 将数据绑定到我的 javascript 数据对象的选项导致另一个选项显示为 select编辑。

示例数据对象：

var data = {
    "person": { "no" : 2 },
    "options": [
        {"no":0,"t":"null"},
        {"no":1,"t":"a"},
        {"no":2,"t":"b"},
        {"no":3,"t":"c"}
    ]
};

对应的 Select 数据绑定设置：

<script id="SelectTemplate" type="text/x-jsrender">
    <select id="MySelect" data-link="person.no">
        <option value=""></option>
        {^{for options}}
        <option data-link="{:t} value{:no} selected{:no === ~root.person.no}"></option>
        {{/for}}
    </select>
</script>

我创建了一个 JsFiddle here 来玩我的设置。谁能向我解释为什么会这样？或者我做错了什么？

注：我想分享我目前的 解决方法 以防其他人碰巧运行遇到这个问题。我正在监听 select 数据绑定对象（即人）上的属性更改事件。这是它的样子：

$(data.person).on('propertyChange', function (event, eventArgs) {
    $("#MySelect").val(eventArgs.value);
});

Answer 1

问题是您使用的是整数值：no:1 而不是 no:"1"。

当设置为相应选项元素的值时，这些值将转换为字符串。因此，当用户选择一个新项目时，值 person.no 被设置为一个字符串 "2"，也就是说，比较失败 :no === ~root.person.no.

所以这里有四种替代修复方法：

1: 如果您不想支持对 t 或 no 值进行动态更改，那么您不需要data-link 选项上的那些值，但可以在初始渲染中静态设置它们：

<select data-link="person.no">
    {^{for options}}
        <option value="{{:no}}">{{:t}}</option>
    {{/for}}
</select>

-但 person.no 在选择后仍会切换为字符串值，除非您使用转换器：<select data-link="{:person.no:toNum}">（请参阅下面的#4...）

2: 如果要保留数据绑定值，可以从使用整数更改为使用字符串值。

3: 保留整数并简单地使比较变得不严格：<option data-link="{:t} value{:no} selected{:no == ~root.person.no}"></option> - 但同样，person.no 将切换为字符串值选择后...

4: 保留整数并转换回整数，因此保留数字类型：

$.views.converters("toNum", function(val) {
    return +val;
})

和

<select data-link="{:person.no:toNum}">
    {^{for options}}
        <option data-link="{:t} value{:no} selected{:no === ~root.person.no}"></option>
    {{/for}}
</select>

（所以现在person.no选择后会有一个数字值...）

顺便说一句 - 旁注：对于你的解决方法，你可以使用替代方法 - 特定于 person.no 的更改，因此，如果 person 的其他属性发生更改，它不会中断：

$.observe(data.person, "no", function (event, eventArgs) {
    $("#MySelect").val(eventArgs.value);
});

而不是

$(data.person).on('propertyChange', function (event, eventArgs) {
    $("#MySelect").val(eventArgs.value);
});

JsView Select 单击后不立即显示所选选项

JsView Select does not display selected option immediately after clicking on it

jsviews