使用 knockout.js 映射插件映射 JSON 数组并且视图渲染不起作用
我在将 .NET JavaScriptSerializer
生成的 JSON 数组映射到 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);
生成的 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}
]
在 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);
问题: < code>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>
如果我删除 ko.mapping.fromJSON() 一切正常,即模板使用提案数组上的值呈现。 但是当我更新 initialData
数组上的对象值时,会出现另一个问题。根据我的理解,如果我更新可观察的属性,模板将再次呈现(因此是 Knockout.js 映射),但如果不映射所有属性,它就不会发生,对吧?
简而言之,我需要映射 initialData
数组上的所有属性,以便在更改其中一个对象的值时使它们可观察到更新我的视图,但是它不起作用。
有什么想法吗?先感谢您!
I'm having a problem mapping a JSON array generated by .NET JavaScriptSerializer
, to knockout.js. The array is generated like this (shortened for ease):
OrderProposalFacade[] proposals = new OrderProposalFacade[order.OrderProposals.Count];
foreach (OrderProposal proposal in order.OrderProposals)
{
proposals[i++] = new OrderProposalFacade(proposal);
}
ViewBag.OrderProposals = new JavaScriptSerializer().Serialize(proposals);
The generated JSON string is something like this:
[{ "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}
]
On the ASP.NET MVC view I do this in order to bind the array:
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);
The problem: the proposals
array is supposed to be rendered by a knockout.js template, but nothing is rendered. Using Firebug I don't see any objects on the initialData
array, so I presume there is an error while initializing it and, therefore, proposals
. The binding to the template is like this:
<div id="service-orders" data-bind='template: { name: "proposal-template", foreach: proposals }' style="margin:0 -.7em 0 -0.5em;"></div>
If I remove ko.mapping.fromJSON()
everything works fine, i.e., the template is rendered with the values on the proposals
array. But another problem arises when I update a value of an object on the initialData
array. On my understanding if I update an observable property, the template is rendered again (therefore the knockout.js mapping), but without mapping all properties it won't happen, right?
In short, I need to map all the properties on the initialData
array in order to make them observable to update my view when I change a value of one of it's objects, but it isn't working.
Any ideas? Thank you in advance!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
终于解决了!最终的 Javascript 如下:
我所做的 2 个更改:
ko.mapping.fromJS(initialData)
,而不是ko.mapping.fromJSON(initialData)
。不太确定,但我似乎.fromJSON()
在映射我放在问题上的数组时存在一些问题;.fromJS()
方法在viewModel
创建后调用。Finally solved it! The final Javascript is like this:
The 2 changes I made:
ko.mapping.fromJSON(initialData)
I callko.mapping.fromJS(initialData)
. Not shure, but I it seems that.fromJSON()
has some problem mapping the array I putted on the question;.fromJS()
method is invoked after theviewModel
creation.