2012-07-28 125 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