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/

希望您的解決方案將像更改一些數據格式和使用映射插件一樣簡單。

無論如何，映射插件都應該向正確的方向發送信息。