Question

我试图创建一个observableArray（使用jQuery模板列出页面上的信息），我想要做的是点击按钮（尽管理想情况下在页面加载时）运行ajax调用和更新数组。

这是我所拥有的，但它不起作用，它给出了一个错误：

this.propertyDetails未定义

HTML：

<button data-bind="click: addProperty">Add property</button>

JS：

var viewModel = {
propertyDetails: ko.observableArray([   
    {name: "1", type: "Unknown"},
    {name: "2", type: "Unknown"},
    {name: "3", type: "Unknown"},
    {name: "4", type: "Unknown"}
]),

addProperty: function() {
    //this.propertyDetails.push({name: "New Thing", type: "Unknown"});

    $.ajax({
        dataType: 'json',
        data: 'count=10',
        url: 'http://feeds.delicious.com/v2/json/tomleadbetter?callback=?',
        success: function (data) {
            $.each(data, function(i,item){
                console.log(item);
                this.propertyDetails.push({name: item.d , type: item.u});
            });
        }
    }); 
}
};

ko.applyBindings(viewModel);

它在按钮单击时运行ajax调用，但在尝试将每个项目推入数组时失败。

别误会我的意思，我可能完全不正确！但是这条线在按下按钮时可以插入到数组中：

this.propertyDetails.push({name: "New Thing", type: "Unknown"});

所以任何指针都会很棒。

Answer 1

您应该处理问题描述。完全失败不是很具体。它会抛出错误还是没有错误地运行，但什么都不做？

我的第一个猜测是this.propertyDetails无法解决，因为this不是您认为的那样。您可以尝试执行console.log(this.propertyDetails)并查看会发生什么。如果它未定义，那么this引用就是问题，您可以通过将.bind(viewModel)添加到处理函数来修复它。

e.g。

addProperty: function() {
    //this.propertyDetails.push({name: "New Thing", type: "Unknown"});

    $.ajax({
        dataType: 'json',
        data: 'count=10',
        url: 'http://feeds.delicious.com/v2/json/tomleadbetter?callback=?',
        success: function (data) {
            $.each(data, function(i,item){
                console.log(item);
                this.propertyDetails.push({name: item.d , type: item.u});
            }.bind(viewModel);
        }
    }); 
}

如何通过Ajax调用的成功处理程序更新observableArray？

1 个答案: