使用选择元素作为编辑器绑定到 knockoutjs 中的整数数组答案

【问题标题】：Binding to an array of ints in knockoutjs with select elements as editors使用选择元素作为编辑器绑定到 knockoutjs 中的整数数组
【发布时间】：2012-12-07 01:59:01
【问题描述】：

我正在使用 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/

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

感谢您的帮助克里斯

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案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 对象。

【讨论】：