observableArray에서 객체 제거

Question

관찰 가능한 배열에서 객체를 제거하는 중 문제가 발생합니다. 선택한 개체를 큐에서 제거해야하는 removeItemFromQueue 함수가 있습니다. 내가 this workaround을 발견

function Item(title, description) { 
    this.title = ko.observable(title); 
    this.description = ko.observable(description); 
} 

var viewModel = { 
    items: ko.observableArray([ 
     new Item("one", "one description") 
    ]), 
    queue: ko.observableArray([]), 
    addItemToQueue: function (item) { 
     this.queue.push(item); 
    }, 
    removeItemFromPage: function (item) { 
     this.items.remove(item); 
    }, 
    removeItemFromQueue: function (item) { 
     this.queue.remove(item); 
    } 
}; 

ko.applyBindings(viewModel); 

: 이것은 자바 스크립트입니다

<h3>Items:</h3> 

<ul data-bind="template: {name:'itemsTemplate', foreach: items}"></ul> 

<h3>Queue:</h3> 

<ul data-bind="template: {name:'queueTemplate', foreach: queue}"></ul> 

<script id="itemsTemplate" type="text/x-jquery-tmpl"> 
    <li> 
     <a href="#">${$data.title}</a> by <a href="#">${$data.description}</a> 
     <button data-bind="click: function() {viewModel.removeItemFromPage($data);}">Remove From Page</button> 
     <button data-bind="click: function() {viewModel.addItemToQueue($data);}">Add To Queue</button> 
    </li> 
</script> 

<script id="queueTemplate" type="text/x-jquery-tmpl"> 
    <li> 
     <a href="#">${$data.title}</a> by <a href="#">${$data.description}</a> 
     <button data-bind="click: function() {viewModel.removeItemFromQueue($data);}">Remove From Queue</button> 
    </li> 
</script> 

:

This example

는 큐에 무리에게 항목을 추가 한 다음 하나를 제거하면, 그것은 그들 모두를 제거하는 것을 보여줍니다 함수에서 ko.toJS(item)을 사용하는 것 :

<h3>Items:</h3> 

<ul data-bind="template: {name:'itemsTemplate', foreach: items}"></ul> 

<h3>Queue:</h3> 

<ul data-bind="template: {name:'queueTemplate', foreach: queue}"></ul> 

<script id="itemsTemplate" type="text/x-jquery-tmpl"> 
    <li> 
     <a href="#">${$data.title}</a> by <a href="#">${$data.description}</a> 
     <button data-bind="click: function() {viewModel.removeItemFromPage($data);}">Remove From Page</button> 
     <button data-bind="click: function() {viewModel.addItemToQueue($data);}">Add To Queue</button> 
    </li> 
</script> 

<script id="queueTemplate" type="text/x-jquery-tmpl"> 
    <li> 
     <a href="#">${$data.title}</a> by <a href="#">${$data.description}</a> 
     <button data-bind="click: function() {viewModel.removeItemFromQueue($data);}">Remove From Queue</button> 
    </li> 
</script> 

그리고이 Javascript :

function Item(title, description) { 
    this.title = ko.observable(title); 
    this.description = ko.observable(description); 
} 

var viewModel = { 
    items: ko.observableArray([ 
     new Item("one", "one description") 
    ]), 
    queue: ko.observableArray([]), 
    addItemToQueue: function (item) { 
     this.queue.push(ko.toJS(item)); 
    }, 
    removeItemFromPage: function (item) { 
     this.items.remove(item); 
    }, 
    removeItemFromQueue: function (item) { 
     this.queue.remove(item); 
    } 
}; 

ko.applyBindings(viewModel); 

더 쉬운 방법이 있습니까?

또한 여기의 카트 예제는 첫 번째 예제와 비슷한 코드를 사용하지만 항목 제거와 동일한 문제가 발생하지 않습니다. 나는 다소 당황 스럽다.

Answer 1

문제는 대기열 배열에 동일한 항목을 여러 번 추가하는 것입니다.

observableArray의 remove 함수는 전달한 항목의 모든 복사본을 제거합니다.

ko.toJS는 데이터의 깨끗한 사본을 얻는 한 가지 방법입니다. 그러나, 필요하다면 관측 대상을 잃을 것입니다.

그렇지 않으면, 당신은 같은 것을 수행 할 수 있습니다 :

this.queue.push(new Item(item.title(), item.description())를하거나 항목의 복사본을하는 데 도움이됩니다 함수를 작성 (항목에 전달하고 새로운 항목을 반환).