Question

我是KnockOut的新手。我已经按照网站上的教程进行了操作，现在我正在尝试将这些知识用于学校的项目中。

不幸的是我被困住了。我想从本地JSON文件动态填充我的文本。我已经调试了，我的代码用于获取数据，但不会显示在我的HTML页面上。

我的观点：

<p data-bind="text: level.assignment">
   replace dynamically
</p>

KnockOut已连接到我的HTML，因为其他绑定有效。我的ViewModel

//Class to represent the Level
function Level(id, assignment, videoURL) {
    var self = this;
    self.id = id;
    self.assignment = assignment;
    self.videoURL = videoURL;
}

function LevelViewModel(id) {
    //Data
    var self = this;
    self.id = id;
    self.level = ko.computed(function () {
        //fetching the local json
        $.get('/Data/Text2Speech.json', "", function (data, textStatus, jqXHR) {
            if (textStatus != "success") {
                return "not found";
            }
            //Make the level object
            self.level = new Level(data.exercise[self.id - 1].id, data.exercise[self.id - 1].assignment, data.exercise[self.id - 1].videoURL);
            return self.level;
        });
    }, this);
};

调试窗口。

Debugging Window In Chrome

我做错了什么？感谢

我的JSFiddle http://jsfiddle.net/pPZ48/

Answer 1

试试这个

<p data-bind="text: level().assignment">replace dynamically</p>

而不是

<p data-bind="text: level.assignment">replace dynamically</p>

以下是 DEMO

Answer 2

该解决方案由Aneesh A.E.发现。他看到JQuery的$ .get（）函数是Async。所以这是正确的代码：

//Class to represent the Level
function Level(id, assignment, videoURL) {
    var self = this;
    self.id = id;
    self.assignment = assignment;
    self.videoURL = videoURL;
}

function getRemoteFile() {
    return $.ajax({
        type: "GET",
        url: '/Data/Text2Speech.json',
        async: false,
        success: function () {
            console.log("Success");
        },
        error: function () {
            console.log("Error");
        }
    }).responseText;
}

function LevelViewModel(id) {
    //Data
    var self = this;
    self.id = id;
    self.level = ko.computed(function () {
        //fetching the local json
        data = JSON.parse(getRemoteFile());
        self.level = new Level(data.exercise[self.id - 1].id, data.exercise[self.id - 1].assignment, data.exercise[self.id - 1].videoURL);
        return self.level;
    }, this);
};

以及将HTML更改为

<p data-bind="text: level().assignment">
 replace dynamically
</p>

文本值未显示

2 个答案: