Question

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

此代码直接从@rneimeyer's fiddle复制。我做了调整它来做我想做的事情。

所以，我有选择作为我的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的小提琴和我之间的区别在于我在observableArray中的对象上添加了choice属性，而不是为我们想要默认的选项提供单独的observable。

这是我尝试的fiddle。

现在我正在检查我的select元素标签中choice属性是否为真。如果是，那么我想将name设置为value属性，以便它成为默认属性。

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

我已经在这里用simple data model in my fiddle测试了这个，这正如我想的那样工作。

我想我的真实查询是如何在data-bind中检查choice属性。我看到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为默认选择的选项。

我不打算创建任何额外的可观察对象，除了数组本身将是一个observableArray。

经过大量研究后，我终于在Knockout's Docs中找到了optionsAfterRender属性的options属性。

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

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

请注意ko.applyBindingsToNode 不能在我原来的小提琴中使用的2.2.0版本上运行。

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));

这里是fiddle。

Answer 2

添加了一个禁用了选择下拉列表中第一个选项的Gist，并使用optionsCaption绑定很好地处理了KO的optionsDisableDefault绑定：

https://gist.github.com/garrypas/d2e72a54162787aca345e9ce35713f1f

HTML：

<select data-bind="value: MyValueField,
    options:OptionsList,
    optionsText: 'name',
    optionsValue: 'value',
    optionsCaption: 'Select an option',
    optionsDisableDefault: true">
</select>

Answer 3

好的如果我理解你想将真正的选择设置为默认选择值。

首先，您需要在下拉菜单中加入id，以便它成为选项的价值，因为我们会根据该唯一id

过滤我们的收藏集

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

正如您现在所看到的，您需要创建一个名为selectedChoice的新observable，并且我们将使用计算结果填充该observable，这是正确的选择。

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

function ViewModel(choices) {
   var self = this;
   self.choices = ko.observableArray(choices);
   self.trueChoice = ko.computed(function(){
       return ko.utils.arrayFirst(self.choices(), function(item){
           return item.choice === true;
       });
    });
    self.selectedChoice = ko.observable(self.trueChoice().id);
};

ko.applyBindings(new ViewModel(choices));

新的计算属性trueChoice使用arrayFirst方法返回choice系列中第一个选项属性设置为true的项目。

既然我们有了真正的选择，我们所要做的就是将下拉列表selectedChoice的选定值设置为该真实选择的id，以便在下拉列表中选择该项目。

Here is also a working fiddle for this

Answer 4

您可以创建一个包含所选项目的计算

self.selected_options = ko.computed({
    read: function() {
        return self.choices.filter(function(item){ return item.choice });
    },
    write: function(value) {
        self.choices.forEach(function(item) { item.choice = value.indexOf(item) > 0;});
    }
})

然后将其绑定到选定的选项。

使用knockout选择默认选项值

4 个答案: