Question

我遇到了这样一种情况：选择一个与我的javascript数据对象绑定的数据的选项导致一个不同的选项显示为选中。

示例数据对象：

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

对应选择数据绑定设置：

<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来玩我的设置。任何人都可以向我解释为什么会这样吗？或者我做错了什么？

注意： 我想分享我当前的解决方法以防万一其他人碰巧碰到这个问题。我正在我的选择数据绑定对象（即人）上收听属性更改事件。这是它的样子：

$(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值进行动态更改，则无需对这些值进行数据链接在选项上，但可以在初始渲染中静态设置它们：

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

-but 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选择后会有一个数字值......）

BTW - 旁注 ：对于您的解决方法，您可以使用替代方法 - 特定于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不会立即显示所选选项

1 个答案: