Knockout - 设置选择的初始值

时间:2012-09-25 18:59:11

标签: knockout.js

我的代码中所选值的范围似乎最初不会填充。谁能告诉我为什么会这样?

小提琴:http://jsfiddle.net/vVLdQ/

我的HTML:

<div>
Disable:
 <span data-bind="text: options[1].text"></span><input type="checkbox" data-bind="checked: options[1].disable" />
 <span data-bind="text: options[2].text"></span><input type="checkbox" data-bind="checked: options[2].disable" />
 <span data-bind="text: options[3].text"></span><input type="checkbox" data-bind="checked: options[3].disable" />
</div>
<div>
<select data-bind="value: selectedValue">
 <option data-bind="value: options[0].text, text: options[0].text"></option>
 <option data-bind="value: options[1].text, text: options[1].text, disable: options[1].disable"></option>
 <option data-bind="value: options[2].text, text: options[2].text, disable: options[2].disable"></option>
 <option data-bind="value: options[3].text, text: options[3].text, disable: options[3].disable"></option>
</select>
</div>
<span data-bind="text: selectedValue"></span>

我的Javascript:

var selectModel;

function OptionModel(text) {
    var me = this;
    me.text = text;
    me.disable = ko.observable(false);
    me.disable.subscribe(function(disableVal) {
        if (disableVal && selectModel.selectedValue() == me.text) {
            selectModel.selectedValue('-- Select --');
        }
    });
}
var options = [
    new OptionModel('-- Select --'),
    new OptionModel('a'),
    new OptionModel('b'),
    new OptionModel('c')
    ];
selectModel = {
    options: options,
    selectedValue: ko.observable(options[0].text)
};
ko.applyBindings(selectModel);​

1 个答案:

答案 0 :(得分:3)

编辑:正如nemesv在评论中所说:“当没有填充选项值时select data-bind="value: selectedValue"绑定会运行,这会将selectedValue重置为null 。“

从另一个StackOverflow问题here,我提出了这个问题:

<select data-bind="foreach: options, value: selectedValue">
    <option data-bind="text: text, value: text, disable: disable"></option>
</select>

我也在复选框中更改了一些内容,以使其更具可读性。有关完整示例,请参阅fiddle