Knockout.js:无法从 JSON 解析绑定

Question

我有一个视图模型，它通过 AJAX 获取 JSON，并创建一个新任务，但 Knockout 一直给我一个绑定错误。

如果我直接在我的视图模型中对来自服务器的数据进行硬编码，则不会收到任何错误。

我的视图模型创建新任务，该任务具有 id、一个问题和许多替代项，它本身具有文本和正确的布尔标志。

以下代码工作正常：

function Task(data) {
var self = this;
self.id = data.id;
self.question = ko.observable(data.question);
var alts = new Array();
$(data.alternatives).each(function(index){
alts.push(new Alternative(data.alternatives[index].alternative, data.alternatives[index].correct));
});
self.alternatives = ko.observableArray(alts);
}
function Alternative(alternativeText, correctAnswer) {
var self         = this;
self.alternative = ko.observable(alternativeText);
self.correct     = ko.observable(correctAnswer);
}
function TaskViewModel() {
var self = this;
var data = {
id: 5,
question: 'test',
alternatives: [{
alternative: 'alt 1',
correct: false
},{
alternative: 'alt 2',
correct: true
},{
alternative: 'alt 3',
correct: false
}]
};
self.task = new Task(data);
}

但是，如果我将硬编码的data变量与来自服务器的真实数据交换：

function TaskViewModel() {
var self = this;
$.getJSON('/data', function(data){
self.task = new Task(data);
});
}

淘汰给了我这个错误：

Error: Unable to parse bindings.
Message: ReferenceError: Can't find variable: task;
Bindings value: value: task.question

URL 中的数据如下所示：

{"id":5,"question":"test","alternatives":[{"alternative":"alt 1","correct":false},{"alternative":"alt 2","correct":true},{"alternative":"alt 3","correct":false}]}

我似乎无法弄清楚为什么这不起作用：/

Answer 1

在应用绑定时，视图模型实际上没有task属性。 你需要给它一些东西来绑定。

有几种方法可以解决这个问题。

可能最简单的方法是使task可观察并将其设置为ajax调用的结果。 您可能需要调整绑定以应对此更改。

function TaskViewModel() {
var self = this;
self.task = ko.observable();
$.getJSON('/data', function(data){
self.task(new Task(data));
});
}

更灵活的选择是为Task对象添加单独的初始化方法并设置任务(未初始化)。然后，作为 ajax 调用的结果，调用初始化方法来初始化它。 当然，您必须调整任务对象的初始化代码。

function TaskViewModel() {
var self = this;
self.task = new Task();
$.getJSON('/data', function(data){
self.task.init(data);
});
}
function Task() {
var self = this;
self.id = ko.observable();
self.question = ko.observable();
self.alternatives = ko.observableArray();
self.init = function (data) {
self.id(data.id);
self.question(data.question);
self.alternatives(ko.utils.arrayForEach(data.alternatives, function (item) {
return new Alternative(item.alternative, item.correct);
}));
};
}

Answer 2

这篇文章包含了许多在 source 为 null 时处理绑定的方法。

当源为空/未定义时，挖空JS绑定

如果您同意无法绑定的UI消失，我建议您使用with

如果selectedItem为 null，则甚至不会显示该元素。

<div data-bind="with: selecteditem">
<form>
<fieldset>
<div>
<label>first name</label>
<input data-bind="value: firstname"></input>
</div>
<div>
<label>lasst name</label>
<input data-bind="value: lastname"></input>
</div>
</fieldset>
<div>
<a href="#" data-bind="click: $root.savechanges">Save</a>
</div>
</form>
</div>