Question

我正在使用knockout.js构建一个排序列表。我有一个版本使用一个简单的可观察数组，但我如何使用我的json数据和使用映射插件？

        // 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());

Answer 1

您的<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
});

使用带有json数据的knockout.js对列表进行排序

1 个答案: