使用 knockoutjs 映射绑定视图模型答案

【问题标题】：Binding viewmodel with knockoutjs mapping使用 knockoutjs 映射绑定视图模型
【发布时间】：2013-01-19 22:24:25
【问题描述】：

我刚刚决定学习 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);
});

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

【问题讨论】：

标签： json knockout.js knockout-mapping-plugin

【解决方案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 调用进行更新时，最好先定义结构并定义可观察对象以使数据绑定工作的视图模型。

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

【讨论】：

我有 fromJSON() 的原因是因为我实际要使用的数据是来自服务器的 json。此外，在您的小提琴中，下拉列表没有显示任何内容..
@rudeovskizebear 我看到了您的更新，并且选项没有显示任何内容。我将处理小提琴（无法访问它）并很快更新我的答案。
感谢@ryadavilli，但我想要一些能自动将我的 json 映射到视图模型的东西。
@rudeovskizebear 我建议你看看Breeze JS。它与 Knockout 视图模型很好地集成，并为实体管理和 ajax 结果缓存提供了额外的功能。

【解决方案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>

【讨论】：