使用 Knockout 以编程方式创建 ObservableArrays答案

【问题标题】：Programmatically Creating ObservableArrays with Knockout使用 Knockout 以编程方式创建 ObservableArrays
【发布时间】：2014-03-12 08:14:17
【问题描述】：

我正在开展一个项目，在该项目中，我的模型字段（名称和数量）要到运行时才能知道，并且应该在检索数据后动态添加。我正在尝试创建一个通用视图模型，其中字段将添加到视图模型并进行水合，因此下游工作的开发人员可以在视图中工作。

例如，我的数据可能如下所示：

// Retrieved data 
{
    "partner_category_str": [
        "Financials",
        "HCM",
        "Payroll",
        "Technology"
    ],
    "partner_program_str": [
        "Certified Solution Partner",
        "Cloud Connect Partner",
        "Connect Partner",
        "Solution Partner"
    ]
}

我的准通用视图模型使用检索到的数据中的属性填充自身：

function Facet (data) {
    this.name = ko.observable(data);
};

function SearchViewModel () {
    var self = this;

    $.getJSON("/partners_api/?requestType=facets&partnerType=Software+Partner", function (facets) {
        var facet = null,
            facetData = null;

        for (facet in facets) {
            facetData = ko.utils.arrayMap(facets[facet], function(facetItem) { return new Facet (facetItem);});
            self[facet] = ko.observableArray(facetData);
        }
    });
};

ko.applyBindings(new SearchViewModel());

我希望 Web 开发人员能够在他们的视图中使用 viewModel 数据（他们在创建视图时会知道字段名称），如下所示：

<!-- View -->
<!-- Note: the bound field name comes directly from the retrieved data -->
<select id="partner_category_str" data-bind="foreach: partner_category_str">
    <option data-bind="text: name, value: name"></option>
</select>

在这些动态创建的字段上，数据并未绑定到视图，但使用data-bind="text: ko.toJSON($root, null, 2)" 查看数据显示属性已在视图模型上设置。看来我的数据在某处的翻译中丢失了，但我不确定在哪里。有什么想法吗？

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

查看mapping plug-in 进行淘汰赛。它将从来自服务器的 json 动态创建淘汰赛 observables。

【讨论】：

抱歉，我花了这么长时间才将其标记为正确！干杯！

【解决方案2】：

我在工作中面临类似的情况。

你没有提供足够的细节让我给出完整的答案，但我可以为你指明正确的方向。

首先：observableArray 是你的朋友。我发现使用模板显示数组比使用 if 绑定更可靠，即使该数组只包含元素。

所以，即兴发挥，像这样。

var vm = {
  // Whatever

  myObjectArray: ko.observableArray();
};


// I'm using Durandal, so I get this nice method when a view is loaded.   
function activate(/* view, parent */) {
 // When the view is activated...

 var myObject = {
   firstName: ko.observable(),
   lastName:  ko.observable()
 };

  vm.myObjectArray.removeAll();
  vm.myObjectArray(myObject);

}

【讨论】：