'this.list.remove'を評価しているときに未定義のオブジェクトがありません

Question

なぜアイテムをアレイから削除できないのですか？

私は、配列のすべてのオブジェクトを表示しようとしていますHTMLビュー、：

<tbody data-bind="foreach:list" > 
<tr> 
    <td data-bind="text:name" class="span10"></td> 
    <td><a class="icon-pencil" href="#"></a>Edit</td> 
    here every time you click at the <a> tag i want to remove an element of the array. but it is not working 
    <td><a class="icon-trash" href="#" data-bind="click:$root.removeItem " > 
    </a>Delete</td> 
</tr> 
</tbody> 

スクリプト：あなたは、私が

self:this, 
self.list : ko.observableArray(customers), 

を次のように

$(function() { 
    var customers=[ 
     {name:'robert'}, 
     {name:'miguel'}, 
     {name:'felipe'}, 
     {name:'juan'}, 
     {name:'danilo'}, 
     {name:'federico'} 
    ]; 

    var viewModel = { 

     self:this, 

     list: ko.observableArray(customers), 

     // it's not removing the item of the array. 
     removeItem: function(place) { 
      this.list.remove(place); 
     } 
    }; 
    ko.applyBindings(viewModel); 
}); 

Answer 1

を置くことができますあなたは自己を入れていないと思う。

Answer 2

the this keywordにお読みください。

最初の問題は、オブジェクトリテラル内にのものがあることです。

オブジェクトリテラルの内部では、thisはでなく、はそのオブジェクトを参照します。最も近いスコープは$(function() { ... });の設定です（docsを参照してください）$(document).ready(...)thisがdocumentに（少しはっきりと）バインドされているため、コードではdocumentを参照します。

ここ全て（viewModelない）同じことをログこの、A、B、及びCを実証する例を示します。また

console.log(this.document); // A 
 

 
$(function() { 
 
    var customers = [{ 
 
    name: 'robert' 
 
    }]; 
 
    
 
    console.log(this); // B 
 

 
    var viewModel = { 
 
    self: this 
 
    }; 
 
    
 
    console.log(viewModel.self); // C 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

注内部そのthisremoveItem関数は、デフォルトでのに最も近い関数スコープを参照します。removeItem関数自体です（ではなく）。,documentまたはviewModel）。

解決策1：あなたは本当にオブジェクトリテラルを使用したい場合は、あなたが最初のオブジェクトを宣言し、後でそのプロパティを追加することができ、例えば：

var viewModel = {}; 
viewModel.list = ko.observableArray(customers); 
viewModel.removeItem = function(place) { 
    viewModel.list.remove(place); 
}; 

は、ソリューション2：あなたはthe self = this idiomを使用する場合私の代わりにコンストラクタ関数を使用することをお勧めします

function ViewModelConstructor(myCustomers) { 
    var self = this; 
    self.list = ko.observableArray(myCustomers); 
    self.removeItem = function(place) { 
     self.list.remove(place); 
    }; 
} 

// Get an instance: 
var viewModel = new ViewModelConstructor(customers); 

---

PUに

var customers=[ 
 
    {name:'robert'}, 
 
    {name:'miguel'}, 
 
    {name:'felipe'}, 
 
    {name:'juan'} 
 
]; 
 

 
function ViewModelConstructor(myCustomers) { 
 
    var self = this; 
 
    self.list = ko.observableArray(myCustomers); 
 
    self.removeItem = function(place) { 
 
     self.list.remove(place); 
 
    }; 
 
} 
 

 
// Get an instance: 
 
var viewModel = new ViewModelConstructor(customers); 
 

 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script> 
 

 
<table> 
 
    <tbody data-bind="foreach: list"> 
 
    <tr> 
 
     <td data-bind="text: name"></td> 
 
     <td><a href="#">Edit</a></td> 
 
     <td><a href="#" data-bind="click: $root.removeItem">Delete</a></td> 
 
    </tr> 
 
    </tbody> 
 
</table>