Knockout foreach循环迭代相同的数据元素

Question

我有一个4个元素的数组，并通过绑定传递给foreach循环。

<ul data-bind="foreach: relatives"> 
     <li> 
      <span data-bind="text: First"></span> 
      <span data-bind="text: Last"></span> 
      <span> 
       <a href="#" class="tag-edit">Edit</a> 
       <a href="#" class="tag-delete">Delete</a> 
      </span> 
     </li> 
    </ul> 

出于某种原因，我的输出是给我一个相对四次，我调试我只有在我的数据阵列的4位亲人我做了观测。我的html显示redudant条目。这非常明显，我没有犯我的数组错误，它显然有4个元素，但foreach循环显得很奇怪。

使用JavaScript淘汰赛：

var data = [ 
    { Id: 1, First: "John", Last: "Doe", Address: "76 Hero Ave" }, 
    { Id: 2, First: "Bill", Last: "Doe", Address: "467 Nantucket Rd" }, 
    { Id: 3, First: "Sue", Last: "Doe", Address: "467 Nantucket Rd" }, 
    { Id: 4, First: "Jane", Last: "Doe", Address: "76 Hero Ave" }, 
]; 

var viewModel = { 
    // data 
    relatives: ko.observableArray(data), 
    firstNameToAdd: ko.observable(""), 
    lastNameToAdd: ko.observable(""), 

    // behaviors 
    addRelative: function() { 
     this.relatives.push({ First: this.firstNameToAdd(), Last: this.lastNameToAdd()  }); 
     this.firstNameToAdd(""); 
     this.lastNameToAdd(""); 
    } 
}; 

$(document).on("click", ".tag-delete", function() { 
    var itemToRemove = ko.dataFor(this); 
    viewModel.relatives.remove(itemToRemove); 
}); 

ko.applyBindings(viewModel); 

从视图模型的代码块上点击添加删除添加，我的名单将不再显示任何内容。我的调试显示我没有任何数据，也没有显示出来。

Answer 1

试试这个：

查看

<ul data-bind="foreach: relatives"> 
    <li> 
     <span data-bind="text: First"></span> 
     <span data-bind="text: Last"></span> 
     <span> 
      <a href="#" class="tag-edit">Edit</a> 
      <a href="#" data-bind="click: $parent.remove">Delete</a> 
     </span> 
    </li> 
</ul> 

的Javascript

var data = [ 
    { Id: 1, First: "John", Last: "Doe", Address: "76 Hero Ave" }, 
    { Id: 2, First: "Bill", Last: "Doe", Address: "467 Nantucket Rd" }, 
    { Id: 3, First: "Sue", Last: "Doe", Address: "467 Nantucket Rd" }, 
    { Id: 4, First: "Jane", Last: "Doe", Address: "76 Hero Ave" }, 
]; 

​var viewModel = { 
    // data 
    relatives: ko.observableArray(data), 
    firstNameToAdd: ko.observable(""), 
    lastNameToAdd: ko.observable(""), 


    // behaviors 
    addRelative: function() { 
     this.relatives.push({ 
      First: this.firstNameToAdd(), 
      Last: this.lastNameToAdd() 
     }); 
     this.firstNameToAdd(""); 
     this.lastNameToAdd(""); 

    }, 

    remove: function(item) { 
     viewModel.relatives.remove(item); 
    }, 
}; 

ko.applyBindings(viewModel);​