2012-07-28 63 views
0

我的MVC剃刀視圖結合呈現此標記:後期觀察到陣列中KnockoutJS

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","",""]}]; 

結果HTML ,在應用ko綁定之後,採用可編輯網格的形式: enter image description here

我需要用knockoutJS自動生成可以在用戶更改這些輸入字段中的數據時更新視圖模型。但由於視圖模型是從簡單的JSON對象初始化的,因此NameBlocksParamBlocks不是ko.observableArray。我需要他們。我如何實現這一目標?

P.S.一種想法是其中剃刀序列化僅Name/ParamBlocks陣列做了較爲複雜的初始化,並ExistingNamings陣列通過JavaScript代碼手動填充,創建具有Name/ParamBlocks一個自定義的命名的類對象包裹成ko.observableArray。但這是唯一的方法嗎?

回答

1

有一個mapping plug-in可用,應該爲你做的伎倆,雖然你可能需要改變數據的交付方式。

映射插件提供一個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/

希望你的解決方案將是一樣簡單的幾個數據格式的變化和使用映射插件。

無論如何,映射插件應該向您發送正確的方向。

+0

試過了。但繼續使用我在P.S.中提到的「編碼模型」方法。我的問題,因爲映射工具使添加函數到內部映射元素非常複雜。 – 2012-07-29 21:17:30