Question

我正在尝试使用knockoutjs绑定页面上的select元素。 select元素需要显示从可观察对象数组构建的选项。我创建了一个计算属性，使用我的observable数组创建一个格式良好的数组： -

//my observable array of objects
self.TestTypes = ko.observableArray([ { Test: 'A'}, {Test: 'B'}]);

//my computed function to create {value, text} objects formatted nicely
self.Options = ko.computed(function() {
    var options = [];
    for(var i = 0; i < self.TestTypes().length; i++) {
        options.push({ value: self.TestTypes()[i].Test, text: 'Test ' + self.TestTypes()   [i].Test });
    }
    return options;
}, self);

我可以使用它来有效地填充我的选择元素选项而不会出现问题。

我还有一个对象（与我的可观察数组中的对象相同的类型），它应该驱动select元素的值： -

self.Test = ko.observable(new TestModel(model.Test));

我的示例对象的定义在这里（它非常简化）

var TestModel = function(model) {
    var self = this;
    self.Test = ko.observable(model.Test);
};

最后，我尝试将所有内容绑定到我的select元素，但该值没有注意到我的self.Test对象： -

<select data-bind="value: Test.Test, options: Options, optionsText: 'text', optionsValue: 'value'"></select>

我觉得这与引用有关，但我无法理解它。我有一个完整的例子（极简化的）代码on jsFiddle。有谁知道我做错了什么？

Answer 1

找到解决方案，我已经扩展了我的原始示例。我的主要目标是下拉列表将Test对象的更改驱动到TestTypes列表中的新对象。我偶然发现了knockoutjs mapping plugin，我可以用它来实现这个目的。

基本上，我的问题是我无法将我的TestModel声明为ko.observable，因为嵌套属性不会以我想要的方式成为可观察对象。但是我希望它是一个可观察的，这样我就可以通过将它分配给我的TestTypes数组中的一个实例来轻松更新整个TestModel。在我的第一个小提琴中，你可以修复它，如果你只是从主模型中的self.Test中删除ko.observable，使其成为： -

self.Test = new TestModel(model);

无论如何，如果有人对我的updated jsFiddle is here感兴趣。

KnockoutJS：绑定复杂的选择

1 个答案: