Knockout.js - 通过 Ajax 加载模型后配置绑定答案

【问题标题】：Knockout.js - Configuring Bindings after loading model via AjaxKnockout.js - 通过 Ajax 加载模型后配置绑定
【发布时间】：2013-05-15 16:58:11
【问题描述】：

我正在构建一个包含 10 个不同表单的大页面 - 每个表单都是它自己的模型，并有一个主模型将它们全部拉入。

第一：

var masterPageModel = new PageViewModel();
ko.applyBindings(masterPageModel);

其中引用了 pageViewModel.js::

// section-specific models
this.selectedCoverage = new SelectedCoverage();
// continue with other sub-models...

像这样引用 selectedCoverage.js（和其他）：

this.tier_chosen = ko.observable("Individual + Family");
this.subscriber_dob = ko.observable('January 15, 1970');
this.subscriber_age = ko.observable(43);

我现在意识到我需要在这些模型中预先填充数据。所以，我开始走这条路：

var self = this;
$.getJSON("./load.php",{},function(data){
    self.selectedCoverage = new SelectedCoverage(data);
});

现在，selectedCoverage.js 看起来像：

ko.mapping.fromJS(data, {}, this);

但是，我的表单不再按预期工作。具体来说，“with: [model]”不再看到相关模型。

<div data-bind="with: selectedCoverage" >

页面不再像以前那样看到这个模型，因此，整个部分都被隐藏了。

我也尝试通过 $root 引用它，但仍然没有成功。

<div data-bind="with: $root.selectedCoverage" >

如何确保应用绑定知道 ajax 获取的模型在哪里？

谢谢。

更新我确实尝试让这些初始值可观察，但没有乐趣：

// *** section-specific models
self.selectedCoverage = ko.observable();
$.getJSON("./load.php",{},function(data){
    self.selectedCoverage = new SelectedCoverage(data);
});

【问题讨论】：

标签： knockout.js knockout-2.0 knockout-mapping-plugin

【解决方案1】：

您没有提供其余代码，主要是您如何以及何时将视图模型绑定到 DOM，但我认为这可能是因为selectedCoverage（顺便说一下contactInformation）不是可观察的对象。你应该做的大概是这样的：

self.selectedCoverage = ko.observable();
self.contactInformation = ko.observable();

$.getJSON("./load.php",{},function(data){
    self.selectedCoverage(new SelectedCoverage(data));
    self.contactInformation(new ContactInformation(data));
});

【讨论】：

不是 self.selectedCoverage = new SelectedCoverage(data) 而是 self.selectedCoverage(new SelectedCoverage(data));