0

我刚刚决定学习knockoutjs，并且在将一些json绑定到我的视图模型时遇到了一些问题。我已经搜索了很多东西，尝试了很多东西，但我一定错过了一些东西。

Javascript：

    var data = {
        "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }],
        "TestText": "Hello World"
    };

    var viewModel = {};
    ko.mapping.fromJSON(data, viewModel);

    ko.applyBindings(viewModel);

HTML

TestText: <span data-bind="text: TestText"></span><br>
TestList: <select id="TestList" 
            data-bind="
            options: TestList, 
            optionsText: 'Name', 
            optionsValue: 'ID', 
            optionsCaption: 'Please Select'"></select>

编辑

变量“数据”用作我从服务器返回的 json 示例。无论如何，我已经用 getJSON 更新了上面的代码并得到了一个错误，上面的例子真的不能给我，因为它不使用 getJSON。

更新了 JAVASCRIPT：

var viewModel;
$.getJSON('/myurl',
    function (data) {
        viewModel = data;
    });

alert(viewModel);

$(function() {
    ko.applyBindings(viewModel);
});

我在这里遇到的问题是它可以工作..只要警报框在那里。如果我评论那条线，它不起作用！

4

2 回答 2

2

您的第一个问题是您将数据声明为一个数组，其中只有一个成员，但您没有在数据绑定声明中引用此数组。

其次，如果您将数据作为 JavaScript 对象，则不需要 fromJSON。

更新的 JS 代码：

var data = {
    "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }],
    "TestText": "Hello World"
};

var viewModel = data;//{};

ko.applyBindings(viewModel);

工作小提琴：http: //jsfiddle.net/AfgAG/19/

编辑：更新答案以反映问题中的更新以及初始答案。\

您的视图模型需要将选项列表作为可观察数组，以使选项绑定起作用。

此外，当您使用 AJAX 调用进行更新时，最好在定义结构和定义数据绑定的可观察对象的情况下开始您的视图模型。

有关更新的 javascript 代码，请参见下文。无法创建小提琴，因为我无法访问小提琴端。

var viewModel = 
    {
        TestText: ko.observable('My Initial Text'),
        TestList: ko.observableArray([])
    }

ko.applyBindings(viewModel);

// using set time out here to simulate your ajax call.
setTimeout(function () {
    // this would normally be the content for your getJson success method. 
    // this is where you use your from JSON. 
    // data is a javascript object from ajax response. 
    var data = {
        "TestList": [{ "ID": "1", "Name": "Dave" }, { "ID": "2", "Name": "Mustaine" }],
        "TestText": "Hello World"
    };
    // update the view model observable properties.
    viewModel.TestText(data.TestText);
    viewModel.TestList(data.TestList);
}, 2000);
于 2013-02-05T04:02:37.353 回答
0

我已经想通了。仅供参考，这就是我所做的：

javascript

    var viewModel = (function () {
        var self = this;
        this.model = ko.observableArray([]);

        $.getJSON('/myurl',
            function (data) {
                self.model = ko.mapping.fromJS(data, self.model);
                ko.applyBindings(self.model);
            });
    });

    ko.applyBindings(new viewModel());

html

<span data-bind="text: TestText"></span>
<select id="TestList" 
            data-bind="
            options: TestList, 
            optionsText: 'Name', 
            optionsValue: 'ID', 
            optionsCaption: 'Please Select'"></select>
于 2013-02-05T22:44:57.350 回答