【问题标题】:Knockout - setting the initial value of a selectKnockout - 设置选择的初始值
【发布时间】:2012-09-17 08:25:38
【问题描述】:

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

小提琴: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);​

【问题讨论】:

  • 为什么不使用options 绑定来填充select
  • 如果你能告诉我一种通过绑定禁用选项的方法,我会很高兴!
  • 确实...我看不到使用选项的方法。这是另一个使用 foreach 的解决方案:fiddle

标签: knockout.js


【解决方案1】:

编辑:正如 nemesv 在 cmets 中所说:“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

【讨论】:

  • 是数据绑定执行的顺序导致了原始问题。 select data-bind="value: selectedValue" 绑定在尚未填充选项值时运行,这会将 selectedValue 重置为 null。您的解决方案很好地解决了这个问题。
  • 谢谢,我认为可能是这样,但并不完全确定。我将编辑我的答案,以便所有人都能轻松看到该信息。
猜你喜欢
  • 1970-01-01
  • 2019-02-22
  • 1970-01-01
  • 2015-12-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-03-10
  • 2013-12-10
相关资源
最近更新 更多