Question

我刚刚决定学习knockoutjs，我有一些问题将json绑定到我的viewmodel上。我已经搜索过它，尝试了很多东西，但我一定错过了什么。

的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>

修改的

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

更新了JAVASCRIPT ：

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

alert(viewModel);

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

我在这里遇到的问题是它有效..只要警报框在那里。如果我评论该行，它不起作用！

Answer 1

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

其次，如果您将数据作为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调用更新时，为数据绑定定义的observable可以正常工作。

请参阅下面的更新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);

Answer 2

我已经弄清楚了。仅供参考，这就是我所做的：

<强>的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>

绑定viewmodel与knockoutjs映射

2 个答案: