使用knockout.js与json数据排序列表

Sorted list using knockout.js with json data

本文关键字：数据 排序 列表 json knockout js 使用      更新时间：2023-09-26

我正在使用knockout.js构建一个排序列表。我有一个版本与一个简单的可观察数组工作，但我怎么能使它与我的json数据和使用映射插件工作?

http://jsfiddle.net/infatti/x66Ts/

        // Here is my json data
        var viewModel;
        $.getJSON('http://echo.jsontest.com/name/Stuart', function (data) {
            viewModel = ko.mapping.fromJS(data);
            ko.applyBindings(viewModel);
        });
// Here is my working version of the simple observable array. How can it work using json data and the mapping plugin?
var ListSortModel = function () {
  // my items
    this.allItems = ko.observableArray([
        { name: 'Denise' },
        { name: 'Charles' },
        { name: 'Bert' }
    ]); 
    // sorter
    this.sortItems = function() {
        this.allItems(this.allItems().sort(function(a, b) { return a.name > b.name;}));
    };
};
ko.applyBindings(new ListSortModel());

您的<ul>元素绑定到视图模型的allItems数组。但是当你在映射结果时，你只有一个具有可观察属性name的对象。没有allItems性质。因此，您只会收到一个错误:

错误:无法解析绑定。消息:ReferenceError: allItems未定义;绑定值:foreach: allItems

另一个问题是，您得到单个项目{"name": "Stuart"}响应(不是项目数组)。您不能仅仅将该项分配给视图模型的allItems属性。您需要将该项添加到视图模型项中:

var viewModel = new ListSortModel();
ko.applyBindings(viewModel);
$.getJSON('http://echo.jsontest.com/name/Stuart', function (data) {
    var item = ko.mapping.fromJS(data); // make it observable
    viewModel.allItems.push(item); // add to view model items
});
相关文章：