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

【问题标题】：How to update observableArray via success handler of an Ajax call?如何通过 Ajax 调用的成功处理程序更新 observableArray？
【发布时间】：2011-10-20 22:07:54
【问题描述】：

我试图创建一个 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"});

所以任何指针都会很棒。

【问题讨论】：

a-ha，我需要这样做：viewModel.propertyDetails.push({name: item.d, type: item.u});这样做很好:)。那么，在淘汰赛中，我如何在页面加载时运行它？
在页面加载时运行代码的哪个方面？应用绑定还是运行 ajax 调用？
我认为我需要做的是获取 url（其中将包含参数），然后在页面加载时运行 ajax 调用，它将由数组提供。
我认为您应该阅读 JavaScript 以及在使用 JavaScript 时“this”的含义。在 JavaScript 中，“this”关键字具有函数作用域而不是块作用域，这在 C#/Java 等语言中很常见。如果您使用 Firebug 进行调试，您会在成功处理函数的上下文中看到“this”的值。这不是你所期望的;)

标签： ajax arrays knockout.js

【解决方案1】：

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

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

例如

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

【讨论】：