KnockoutJS - 无法从纯JSON数组映射模型

时间:2014-11-23 22:58:50

标签: javascript arrays json knockout.js

我正在开发一个使用静态JSON数组的应用程序,该数组不是由任何后端服务提供的,并且尝试使用KnockoutJS将其绑定到页面。我可以成功加载JSON数组,甚至将正确数量的observable绑定到一个ko observableArray中,但所有的observable最终都是空的。我不知道我做错了什么,因为我的模型似乎与我的JSON对象设置相同,并且我设置的任何控制台日志记录都显示JSON正确加载。如果有人能找到我正在犯的错误,我会非常感激。

这是一些相关的代码,有一个jsfiddle:

function Item(data) {
    this.id = ko.observable(data.id);
    this.category = ko.observable(data.category);
    this.rank = ko.observable(data.rank);
    this.name = ko.observable(data.name);
    this.images = ko.observableArray([]);
    this.price = ko.observable(data.price);
    this.description = ko.observable(data.description);
}

function ChristmasListViewModel() {
    var self = this;
    self.items = ko.observableArray([]);
    self.selectedItem = ko.observable();

    self.selectItem = function(item) {
        self.selectedItem(self.items()[item]);
    }

    $.getJSON("https://rawgit.com/bonso/bonso.github.io/master/scripts/listitems.json", function(data) {
        // var mappedItems = $.map(data, function(item) { return new Item(item) });
        // self.items(mappedItems);
        // console.log(self.items()[0]);
        var tempArray = [];
        $.each(data, function(i) {
            tempArray.push(new Item(data[i]));
        });
        self.items(tempArray);
        console.log(self.items()[0]);
    });
}

$(document).ready(function() {
    ko.applyBindings(new ChristmasListViewModel());
});

小提琴:http://jsfiddle.net/8j7g08qr/1/

1 个答案:

答案 0 :(得分:1)

你忘记了数据绑定中的一件事。

data-bind="text: name" in H2.

您可以在http://jsfiddle.net/8j7g08qr/2/

中看到更新