Как обновить observableArray через обработчик успеха вызова Ajax?

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) к своей функции обработчика.

1010 *, например *

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