Knockout.js 使用select元素作为编辑器绑定到knockoutjs中的int数组

我正在使用KnockoutJS2.2。我有一个记录，可以有零到多个类别关联。但是，我发现KnockoutJs实际上并没有将值绑定到记录的categories数组中的项

类别数组是{id，name}对象。这是从查找列表派生的

self.categories = ko.observableArray([{id:1,name:'Test1'},{id:2,name:'Test2'}]);

在我的视图模型上，我有一个记录对象。此对象上的一个字段是categories（observableArray）

为了简化绑定，记录对象在viewmodel上称为“r”

<div class="yui3-u-4-5">
    <!-- ko foreach: r.categories-->
    <select data-bind="options: $parent.categories, optionsCaption:'-', 
optionsValue:'id', optionsText:'name', value:$data" />
    <div class="del" data-bind="click: $parent.removeCat" />
    <br />
    <!-- /ko -->
    <button data-bind="click: addCat">Add category</button>
</div>

基本上，当一个类别添加到self.r.categories数组中，然后从下拉列表中选择一个类别时，所选项目的值不会绑定到数组中的可观察值（$data）。数组值保持为空

我在这里重新创建了问题：

也许我应该用另一种方式来做

谢谢你的帮助

---

Kris

您不应该像这样向您的可观测数组添加实际的新空可观测值

self.addCat = function () {
    self.r.categories.push(ko.observable(null)); 
} 

此外，如果希望对象的Id和Name属性是可观察的，则需要为它们创建一个模型

self.addCat = function () {
    self.r.categories.push(new Category(null, self));
};

function Category(data, parent) {
   var self = this; 
   self.Id = ko.observable(-1);
   self.Name = ko.observable('');

   self.load = function(data) {
       if (data) {
           self.Id(data.Id);
           self.Name(data.Name);
       }
   }
   self.load(data);
}

这是我的通用模板，我将其应用于所有模型，以更好地支持延迟绑定和灵活性

现在您将拥有一个

observableArray r

，其中包含具有可观察属性的

类别

对象

self.addCat = function () {
    self.r.categories.push(ko.observable(null)); 
} 

self.addCat = function () {
    self.r.categories.push(new Category(null, self));
};

function Category(data, parent) {
   var self = this; 
   self.Id = ko.observable(-1);
   self.Name = ko.observable('');

   self.load = function(data) {
       if (data) {
           self.Id(data.Id);
           self.Name(data.Name);
       }
   }
   self.load(data);
}