javascript - 来自 AJAX 的 Knockout 加载变量

Question

我是 Knockout 的新手，不知道如何执行以下操作:

我想从 AJAX 加载一个变量类别，AJAX 调用返回如下内容:

{
    "categories": [
        {
            "slug": "identity",
            "name": "Identity"
        },
        {
            "slug": "buisness-cards",
            "name": "Buisness cards"
        }
    ]
}

我想用这样的方式显示 ul:

function AppViewModel() {
    var self = this;       
    self.categories = [];
    
    $.ajax({
        dataType: "json",
        url: "localhost/categories.json",
        success: function(data) {
            self.categories = data; 
        }
    });
   
    console.log(self.categories);
};

ko.applyBindings(new AppViewModel());

我的 HTML 是:

<ul data-bind="foreach: categories">
    <li data-bind="text: $data, css: { selected: $data == "koko" }"></li>
</ul>

显然我遗漏了一些东西，因为在 AJAX 调用加载它之前使用了类别。

我该怎么做？

Answer 1

您的 viewModel 和 View 中有很多错误。

View 模型:

function AppViewModel() {
    var self = this;
    self.categories = ko.observableArray();

    $.ajax({
        dataType: "json",
        url: "localhost/categories.json",
        success: function(data) {
            ko.utils.arrayPushAll(self.categories, data); 
        }
    });
};

HTML:

<ul data-bind="foreach: categories">
    <li data-bind="text: name, css: { selected: name == "koko" }"></li>
</ul>

http://jsfiddle.net/YK34m