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

发布于 2024-12-19 09:57:41 字数 1723 浏览 0 评论 0原文

我在将 .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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

烟凡古楼 2024-12-26 09:57:41

终于解决了!最终的 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);

我所做的 2 个更改:

  • 我调用了 ko.mapping.fromJS(initialData),而不是 ko.mapping.fromJSON(initialData)。不太确定,但我似乎 .fromJSON() 在映射我放在问题上的数组时存在一些问题;
  • .fromJS() 方法在 viewModel 创建后调用。

Finally solved it! The final Javascript is like this:

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);

The 2 changes I made:

  • instead of ko.mapping.fromJSON(initialData) I call ko.mapping.fromJS(initialData). Not shure, but I it seems that .fromJSON() has some problem mapping the array I putted on the question;
  • the .fromJS() method is invoked after the viewModel creation.
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文