如何將我的Knockout代碼移出視圖並仍然能夠映射ViewModels？

Question

我目前正在嘗試將我的MVC視圖模型映射到挖空視圖模型中。我正在使用映射擴展進行淘汰賽來自動執行此操作。

我可以將它工作時，JavaScript是考慮到，因爲我可以直接像這樣剃刀代碼引用視圖模型...

var model = @Html.Raw(Json.Encode(Model)) 
indexViewModel.serverViewModel = ko.mapping.fromJS(model); 

然而，當JavaScript是在單獨的文件，我不確定要做什麼。

我決定把MVC視圖模型放入一個隱藏變量（不知道我是否打算這麼做）。

@Html.Hidden("Model", @Html.Raw(Json.Encode(Model))) 

，然後引用它在我的JS像這樣

var model = $('#Model').val(); 
indexViewModel.serverViewModel = ko.mapping.fromJS(model); 

現在的問題是，它似乎並沒有被映射。

我在這兩個JS-在用和單獨的JS文件版本，他們都輸出

{"companies":[{"Key":1,"Value":"BHP  "}]} 

這是我後JSON看着模型的內容。

這只是由於某種原因在單獨的JS文件中，ko.mapping.fromJS（model）返回一個字符串，其中JS-in-View版本將其作爲observables（）的層次返回。

Answer 1

在您的第一samaple：

var model = @Html.Raw(Json.Encode(Model)) 
indexViewModel.serverViewModel = ko.mapping.fromJS(model); 

的model變量保持了能夠與ko.mapping.fromJS(model)被映射一個JS對象。

然而，在你的第二個例子：

var model = $('#Model').val(); 

的model現在包含一個JSON字符串，需要映射differenlty與ko.mapping.fromJSON方法：

所以下面應該工作：

var model = $('#Model').val(); 
indexViewModel.serverViewModel = ko.mapping.fromJSON(model); 

另請參閱documentation，使用JSON字符串部分。

Answer 2

此行

var model = $('#Model').val(); 

返回一個string而ko.mapping.fromJS期待JavaScript對象（"fromJS"）。

嘗試：

var model = JSON.parse($('#Model').val());