Question

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

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

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

我的准通用viewModel，它使用检索到的数据中的属性填充自身：

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)"查看数据显示在viewModel上设置了属性。看来我的数据在某处翻译时丢失了，但我不知道在哪里。有什么想法吗？

Answer 1

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

我没有给出足够的细节给我一个完整的答案，但我可以帮助你找到正确的方向。

首先：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);

}

Answer 2

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

以编程方式使用Knockout创建ObservableArrays

2 个答案: