Knockout.js：无法从JSON解析绑定 [英] Knockout.js: Unable to parse bindings from JSON

问题描述

我有一个获取JSON通过AJAX，并创建一个新的任务视图模型，但淘汰赛继续给我一个绑定错误。

I have a view model that fetches JSON through AJAX, and creates a new Task, but Knockout keep giving me a binding error.

如果我硬$ C C从服务器直在我的视图模型传来的数据$，我没有收到任何错误。

If I hard code the data coming from the server straight in my view model, I don't receive any errors.

我的视图模型创建新任务，有一个ID，一个问题和一些变质剂的，这本身就具有文本和正确的布尔标志。

My view model creates new task, that has an id, a question and a number of alteratives, which in itself has a text and correct boolean flag.

下面code工作完全正常：

The following code works perfectly fine:

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

但是，如果我exhcange硬codeD从服务器实时数据数据变量：

function TaskViewModel() {
    var self = this;

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

淘汰赛给了我这个错误：

Knockout gives me this error:

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

从URL中的数据如下所示：

The data from the URL looks like the following:

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

我似乎无法找出为什么这是行不通的：/

I can't seem to figure out why this won't work :/

推荐答案

您绑定的应用的时候你的视图模型实际上并没有一个工作属性。你需要给它的东西结合。

Your view model doesn't actually have a task property by the time your bindings are applied. You need to give it something to bind to.

有几个方法可以处理这个问题。

There's a couple of ways you can handle this.

也许最简单的方法是让工作观察到的，并将其设置为AJAX调用的结果。您可能需要调整您的绑定来解释这一变化。

Probably the easiest way would be to make task observable and set it as the result of the ajax call. You may need to adjust you bindings to account for this change.

function TaskViewModel() {
    var self = this;
    self.task = ko.observable();

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

一个更灵活的办法是添加一个单独的初始化方法为你的工作对象和设置任务（未初始化）。然后，随着Ajax调用的结果，调用初始化方法来初始化它。你将不得不调整初始化$ C $下，当然你的任务目标。

A more flexible option would be to add a separate initialization method for your Task objects and set the task (uninitialized). Then as a result of the ajax call, call the initialization method to initialize it. You would have to adjust the initialization code for your task objects of course.

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

这篇关于Knockout.js：无法从JSON解析绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！