0

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

示例数据对象：

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来使用我的设置。谁能向我解释为什么会这样？或者我做错了什么？

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

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

1 回答 1

1

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

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

所以这里有四个替代修复：

1：如果您不想支持对torno值进行动态更改，则不需要在选项上对这些值进行数据链接，但可以在初始渲染中静态设置它们：

<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);
});
于 2015-03-18T19:11:58.577 回答