Question

我正在尝试根据淘汰赛中单选按钮的选择来填充列表。

根据单选按钮的选择，适当的列表会被数据绑定到下拉列表。 http://jsfiddle.net/varunfiddle/5r9gjbdp/＆lt; ---这很好用。

但是，当我在data-bind属性中添加value字段时，第二个下拉列表不会填充自身。

http://jsfiddle.net/varunfiddle/h77mgmx8/1/

<p>

<input type="radio" value="groupUsers" data-bind="checked: Select" />sel users
<input type="radio" value="allUsers" data-bind="checked: Select" />all users
</p>
<p data-bind="text: Select"></p>
<p data-bind="with: Select">
     <select data-bind="value:selU,options: $root.users[$data], optionsText:'name',optionsCaption: 'Choose'"></select><br/>
    Something else? <select data-bind="value:allU, options: $root.users[$data], optionsText:'place'  ,optionsCaption: 'Choose'"></select>
</p>


function ViewModel() {
    this.Select = ko.observable();
    this.selU= ko.observable();
    this.allU=ko.observable();
    this.users = {
        groupUsers:[{name:"Varun",place:"bangalore"},{name:"Harsha",place:"SanJose"}],
        allUsers:[{name:"Robb",place:"houstonn"},{name:"Stark",place:"London"}]
    }}

ko.applyBindings(new ViewModel());

我犯的错误是什么？

当我尝试访问值字段时，我看到一个null。为什么值字段没有更新？ http://jsfiddle.net/varunfiddle/h77mgmx8/3/

Answer 1

问题不在于您的第二个select，而是第一个问题。

修改data-bind两者：

<select data-bind="value:$root.selU,options: $root.users[$data], optionsText:'name',optionsCaption: 'Choose'"></select><br/>
Something else? <select data-bind="value:$root.allU, options: $root.users[$data], optionsText:'place'  ,optionsCaption: 'Choose'"></select>

JSFiddle：http://jsfiddle.net/h77mgmx8/5/

编辑以响应新的小提琴

当您创建数据绑定以引用.name时，您导致绑定爆炸。首次加载模型时，该值将为null;从selU或allU返回的null对象上不存在.name和.name。将以下内容添加到您的模型中：

// Null reference exceptions kill bindings, so let's fix null to
// be an empty object.
var self = this;
ko.computed(function () {
    if (!self.selU()) {
        self.selU({});
    }
    if (!self.allU()) {
        self.allU({});
    }
});

JSFiddle：http://jsfiddle.net/h77mgmx8/13/

Answer 2

试试这个here。

这里是我们正在做的小提琴

<p data-bind="with: Select">
 <select data-bind=" value:$root.selU ,options: $root.users[$data], optionsText:'name',optionsCaption: 'Choose' "></select>

正如Paul所说，你需要使用$ root作为值。

每次我们使用foreach或其他具有循环功能的逻辑时，如果我们指的是该循环之外的任何可观察对象，我们往往忘记编写$ root

根据单选按钮敲除填充下拉列表

2 个答案: