使用knockout.js映射插件映射JSON数组&并且视图渲染不起作用

jmp*_*pcm 3 asp.net-mvc-3 knockout.js

我在将.NET生成的JSON数组映射JavaScriptSerializer到knockout.js时遇到问题.像这样生成数组(为方便起见缩短):

OrderProposalFacade[] proposals = new OrderProposalFacade[order.OrderProposals.Count];

foreach (OrderProposal proposal in order.OrderProposals)
{
    proposals[i++] = new OrderProposalFacade(proposal);
}

ViewBag.OrderProposals = new JavaScriptSerializer().Serialize(proposals);
Run Code Online (Sandbox Code Playgroud)

生成的JSON字符串是这样的:

[{ "ProposalId":1,"ProgrammedWeek":null,
   "ProposalValue":120,"ProposalValueCorrected":130,
   "ProposalDateSent":"01-12-2011","ProposalDateCorrected":"01-12-2011",
   "ServiceId":1,"ServiceDescriptiveId":"OS001","ProposalState":2
 },
 {//another similar object}
]
Run Code Online (Sandbox Code Playgroud)

在ASP.NET MVC视图中,我这样做是为了绑定数组:

var initialData = ko.mapping.fromJSON(<%: new HtmlString(ViewBag.OrderProposals as string) %>);
var viewModel = {
    proposals: ko.observableArray(initialData),
    //some methods; removed to ease reading
};
ko.applyBindings(viewModel);
Run Code Online (Sandbox Code Playgroud)

问题:proposals阵列应该由knockout.js模板被渲染,但没有呈现.使用Firebug我在initialData阵列上看不到任何对象,因此我假设在初始化时出现错误,因此,proposals.绑定到模板是这样的:

<div id="service-orders" data-bind='template: { name: "proposal-template", foreach: proposals }' style="margin:0 -.7em 0 -0.5em;"></div>
Run Code Online (Sandbox Code Playgroud)

如果我删除ko.mapping.fromJSON()一切正常,即模板使用proposals数组上的值进行渲染.但是当我更新initialData数组上的对象的值时,会出现另一个问题.根据我的理解,如果我更新一个observable属性,模板将再次渲染(因此knockout.js映射),但没有映射所有属性,它不会发生,对吧?

简而言之,我需要映射initialData数组上的所有属性,以便在我更改其中一个对象的值时使它们可观察以更新我的视图,但它不起作用.

有任何想法吗?先感谢您!

jmp*_*pcm 5

终于解决了!最终的Javascript是这样的:

var initialData = <%: new HtmlString(ViewBag.OrderProposals as string) %>;
var viewModel = {
    proposals: ko.observableArray(),
    //some methods; removed to ease reading
};

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

ko.applyBindings(viewModel);
Run Code Online (Sandbox Code Playgroud)

我做出的两项改变:

  • 而不是ko.mapping.fromJSON(initialData)我打电话ko.mapping.fromJS(initialData).不舒服,但我似乎.fromJSON()有一些问题映射我提出的问题数组;
  • 创建.fromJS()后调用该方法viewModel.