KnockoutJS中的后期可观察数组绑定

Question

我的MVC剃刀视图呈现此标记：

function existingNamingsViewModel() {
            var self = this;
            var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model));
            self.ExistingNamings = ko.observableArray(initialData);
        }
        ko.applyBindings(new existingNamingsViewModel(), document.getElementById("namings-control"));

转换为正确的JS序列化代码，并将initialData变量初始化为：

var initialData = [{"TypeName":"Orders","NameBlocks":["{intInc_G}","/","{intInc_D}","/02/-","{yy}"],"ParamBlocks":["2296","","1","",""]}];

应用ko绑定后，生成的html采用可编辑网格的形式：

每当用户在这些输入字段中更改数据时，我都需要用基因敲除JS自动更新视图模型。 但是由于视图模型是从简单的JSON对象初始化的，因此NameBlocks和ParamBlocks并不是ko.observableArray 。 我需要他们。 我该如何实现？

PS一个想法是做一个更复杂的初始化，其中剃刀仅序列化Name / ParamBlocks数组，而ExistingNamings数组通过javascript代码手动填充，从而创建一个自定义的Naming类对象，该对象将Name / ParamBlocks包装到ko.observableArray 。 但这是唯一的方法吗？

Answer 1

有一个可用的映射插件可以为您解决问题，尽管您可能需要更改数据传递的方式。

映射插件提供了将JSON对象映射到视图模型的功能：

var viewModel = ko.mapping.fromJS(data);

但是请注意，在文档中（链接到上文），JSON对象内的所有属性均已命名。

您在示例中提供的initialData包含的数组只是值的集合，而不是命名值的集合。

另外， initialData是一个包含单个对象的数组。 如果这种情况总是希望有一个对象，那么此解决方案会更容易。

假设您可以采用以下格式传递initialData ：

var initialData = {
    "TypeName":"Orders",
    "NameBlocks": [
        {"block":"{intInc_G}"},
        {"block":"/"},
        {"block":"{intInc_D}"},
        {"block":"/02/-"},
        {"block":"{yy}"}
    ],
    "ParamBlocks":[
        {"block":"2296"},
        {"block":""},
        {"block":"1"},
        {"block":""},
        {"block":""}
    ]
};

然后，创建视图模型将如下所示：

var viewModel = ko.mapping.fromJS(initialData);

$(function() {
   ko.applyBindings(viewModel); 
});

这是我设置的小提琴，因此您可以在实际中看到它： http : //jsfiddle.net/jimmym715/qUjLQ/

希望您的解决方案将像更改一些数据格式和使用映射插件一样简单。

无论如何，映射插件都应该向正确的方向发送信息。