Ajax呼び出しの成功ハンドラを介してobservableArrayを更新するにはどうすればよいですか？

Question

私はobservableArrayを作成しようとしています（これは、jQueryテンプレートを使用してページの情報を表示します）、そしてボタンのクリック（理想的にはページの読み込みにも関わらず）はajax呼び出しを実行し、アレイ。ここで

は私が持っているものですが、それが動作していない、それがエラーを与える：

this.propertyDetails is undefined

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を実行しますボタンをクリックすると呼び出されますが、各項目を配列にプッシュしようとすると失敗します。

私を間違えないでください、これは完全に間違っているかもしれません！しかし、この行は、ボタンを押して配列に挿入する作業を行います。

したがって、どのポインタも素晴らしいでしょう。

Answer 1

問題の説明に取り組む必要があります。完全に失敗することはあまり具体的ではありません。それはエラーを投げるか、エラーなしに実行するのですか？何もしませんか？

はあなたの考えではないので、私が最初に推測しているのはthis.propertyDetailsです。 console.log(this.propertyDetails)を試して、何が起こるか見てみることができます。定義されていない場合は、の参照が問題です。.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); 
     } 
    }); 
}