使用knockout选择默认选项值

Question

我正在尝试根据我填充选择选项的属性之一选择默认选择选项.

此代码直接从@ rneimeyer的小提琴中复制.我做了调整它来做我想做的事情.

所以,我有选择作为我的observableArray.

var choices = [
    { id: 1, name: "one", choice: false },
    { id: 2, name: "two", choice: true },
    { id: 3, name: "three", choice: false }
    ];

function ViewModel(choices, choice) {
   this.choices = ko.observableArray(choices);
};

rneimeyer的小提琴与我之间的区别在于choice我在observableArray中的对象上添加了属性,而不是为我们想要默认的选项设置单独的observable.

这是我尝试的小提琴.

现在我正在检查我的select元素标签是否choice属性为true.而如果它是那么我想设置name的value属性,使之成为默认的.

<select data-bind="options: choices, optionsText: 'name', value: choice"></select>

我在这里用简单的数据模型测试了这个,这也是我想要的.

我猜我真正的查询是如何choice在data-bind中检查属性.我看到optionText能够访问该name物业就好了.不确定为什么choice属性中的value属性不相同.

Answer 1

我可能误导了一些人.另外,我为没有提到我正在使用的版本而道歉.我目前正在使用Knockout 3.0.0(你会明白为什么这在以后很重要)

另外,请注意我并不是说@ XGreen的方法是错误的,但这并不是我想要的,这可能是由于我的解释不好.

让我首先尝试澄清我想要完成的事情.首先,我将获得一个包含选项信息的对象数组.

[
 { id: 1, name: "one", choice: false },
 { id: 2, name: "two", choice: true },
 { id: 3, name: "three", choice: false }
]

现在,我想要做的是将select选项数据绑定到该数组,其中选项true是默认选择的.

我不打算创建任何额外的observable,除了数组本身将是一个observableArray.

经过大量研究,我终于在Knockout的文档中找到了optionsAfterRender属性的options属性.

<select data-bind="options: choices, 
                   optionsValue: 'name',
                   optionsAfterRender: $root.selectDefault">
</select>

那么optionsAfterRender真正做的是,在每个数组元素上它调用自定义函数,我设置它来检查是否choice为真,并使select选项的值为true.

请注意,这在我原来的小提琴中的2.2.0版本上ko.applyBindingsToNode 不起作用.

function ViewModel(choices) {
   this.choices = ko.observableArray(choices);
    this.selectDefault = function(option,item){
        if(item.choice){
            ko.applyBindingsToNode(option.parentElement, {value: item.name}, item);
        }
    };
};
ko.applyBindings(new ViewModel(choices));

而这里是它的小提琴.