0

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

类别数组是 {id, name} 对象。这是从查找列表中得出的。

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

在我的视图模型上，我有一个记录对象。该对象的字段之一是类别（observableArray）。

categories: ko.observableArray([])

为了在绑定中简洁起见，记录对象在视图模型上称为“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.removeCat = function (data) {
    self.r.categories.remove(data);
};

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

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

我在这里重新创建了问题：http: //jsfiddle.net/fxXsq/

也许我应该以另一种方式这样做？

谢谢你的帮助克里斯

4

1 回答 1

1

您不应该像这样向您的可观察数组添加实际的新空可观察对象。 

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包含Category具有可观察属性的对象。

于 2012-12-19T17:07:06.967 回答