녹아웃 관측 가능한 배열에서 항목을 제거하십시오

Question

나는 녹아웃 모델을 위해 아래의 구조를 가지고 있습니다. 그것은 객체를 포함하는 관찰 가능한 배열을 포함합니다.

function ViewModel() { 
    var self = this; 

    self.newItem = ko.observable({   
     manufacturer: ko.observable(), 
     itemnumber: ko.observable(), 
     itemDescription: ko.observable()  

    }); 
    self.AllItems = ko.observableArray();  

    self.addItem = function() { 
    self.newItem().manufacturer("test");  
    self.newItem().itemDescription("data"); 

    self.AllItems.push(self.newItem); 

    }; 
    self.removeItem = function(data) { 
     self.AllItems.remove(data); 
    }; 
} 

첫 번째 문제 :이 스크립트를 통해 나는 텍스트 상자에 새로운 itemnumber를 입력 한 후 관찰 배열에 추가 텍스트 상자에서 itemnumber에 새 항목을 가지고 추가 항목을 클릭 만하고 나는 항목을 변경할 때 번호와 히트를 추가하면 배열 안의 모든 항목 번호가 변경됩니다. 어떻게하면 배열 내부에 고유 한 데이터를 가질 수 있습니까?

두 번째 문제 : 배열에서 특정 항목을 제거해야하지만 삭제하지는 않습니다. 누군가가 itemnumber 속성에 따라 observable 배열에서 항목을 삭제할 수있는 방법을 알려주십시오.

<input type="text" data-bind="value: newItem().itemnumber"/> 
<div> 
    Items: <button data-bind="click: addItem">Add Item</button> 
</div> 
<div> 
    <table> 
     <tbody data-bind="template: { name: 'itemTemplate', foreach: AllItems }"></tbody> 
    </table> 
</div> 
<script type="text/html" id="itemTemplate"> 
    <tr> 
     <td> 
      <input data-bind="value: itemnumber" /> 
      <a href="#" data-bind="click: $parent.removeItem">Remove Item</a> 
     </td> 
    </tr> 
</script> 

나는 문제의 빠른보기에이 바이올린을 만들었습니다. 그냥 도움이 녹아웃을 배우기 시작했습니다.

http://jsfiddle.net/N3JaW/138/

Answer 1

처음으로 문제를 해결할 수있는 새로운 항목을 추가하기 위해 다음을 시도해보십시오 -

HTML 코드

<input type="text" id="textBox" data-bind="value : textBoxVal"/> 
<div> 
    Items: <button data-bind="click: addItem">Add Item</button> 
</div> 
<div> 
<table> 
    <tbody data-bind="template: { name: 'itemTemplate', foreach: AllItems }"></tbody> 
</table> 
</div> 
<script type="text/html" id="itemTemplate"> 
<tr> 
    <td> 
     <input data-bind="value: itemnumber" /> 
     <a href="#" data-bind="click: $parent.removeItem">Remove Item</a> 
    </td> 
</tr> 
</script> 

JS 코드 : -

function ViewModel() { 
var self = this; 

self.newItem = ko.observable({   
    manufacturer: "", 
    itemnumber: "", 
    itemDescription: "" 

}); 

self.textBoxVal = ko.observable(); 
self.AllItems = ko.observableArray();  

self.addItem = function() { 
self.newItem().manufacturer= "test"; 
self.newItem().itemDescription= "data"; 
self.newItem().itemnumber = self.textBoxVal(); 

self.AllItems.push(self.newItem); 

}; 
self.removeItem = function(data) { 
    self.AllItems.remove(data); 
}; 
} 
$(document).ready(function() {ko.applyBindings(new ViewModel()); }); 

귀하 첫 번째 문제는 새 항목을 추가 할 때마다 관찰 할 수있는 itemNumber의 값을 변경해야합니다.

관측 가능 값은 값이 변경되면 바인딩되는 모든 위치에서 변경됩니다.

대신 새 객체를 만들고 observableArray를 밀어 넣어야합니다.

observableArray에 대한 자세한 내용은 doc을 참조하십시오. 두 번째 문제의 변화 removeItem에 대한

아래로 : -

self.removeItem = function(data) { 
var dtIndex = self.AllItems.indexOf(data); //Get the index of the object you want to remove. 
    self.AllItems.splice(dtIndex, 1); //Then do splice 
}; 

당신은 splice를 사용하는 방법을 알고, 위의 문서를 참조 할 수 있습니다. 주석의 제안에 따라

편집 : - 편집 대답 click here의 코드를 작업에 대한

.

희망이 있으면 문제를 해결할 수 있습니다.