백본 컬렉션에서 항목 제거

Question

다음 코드가 있습니다. 모든 것이 완벽하게 작동하지만 컬렉션에서 항목을 제거하는 방법을 알아 내려고하고 있습니다 (참고 : Backbone을 처음 사용합니다). 나는 여러 가지 다른 게시물을 확인했지만 난 그냥 그것을 알아낼 수 있습니다

Todos = (function(){ 

////////////////////////// 
// 
// MODEL 
// 
////////////////////////// 

var TodoModel = Backbone.Model.extend({ 

    defaults: { 
     item: null 
    } 

}); 

////////////////////////// 
// 
// COLLECTION 
// 
////////////////////////// 

var TodoCollection = Backbone.Collection.extend({ 

    model: TodoModel 

}); 

////////////////////////// 
// 
// VIEW 
// 
////////////////////////// 

var TodoView = Backbone.View.extend({ 

    el: $('#todos'), 

    itemField: $('#new-item'), 

    initialize: function(){ 
     this.el = $(this.el); 
    }, 

    events: { 
     'submit form': 'addItem', 
     'click .remove-item': 'removeItem', 
     // Debug 
     'click #print-collection': 'printCollection' 
    }, 

    template: $('#item-template').html(), 

    render: function(i) { 
     var templ = _.template(this.template); 
     this.el.children('ul').append(templ({item: i})); 
    }, 

    addItem: function(e) { 
     e.preventDefault(); 
     item = this.itemField.val(); 
     // Call render 
     this.render(item); 
     // Clear field 
     this.itemField 
      .val('') 
      .focus(); 
     // Add to collection 
     var newItem = new TodoModel({ 
      item: item 
     }); 
     this.collection.add(newItem); 
    }, 

    removeItem: function(e) { 
     $(e.target).parent('li') 
      .fadeOut(300,function() { 
       $(this).remove(); 
      }); 
     // NEED TO REMOVE FROM COLLECTION... 

    }, 

    printCollection: function(){ 
     this.collection.each(function(item) { 
      console.log(item.get('item')); 
     }); 
    } 

}); 

////////////////////////// 
// 
// SELF 
// 
////////////////////////// 

self = {}; 
self.start = function(){ 
    new TodoView({collection: new TodoCollection()}); 
}; 
return self; 

}); 

Answer 1

당신은 컬렉션 모델을 제거하는 백본의 remove 방법을 사용할 수 있습니다 :

이 모델을 제거 (또는 모델의 배열) 컬렉션에서. 무언가를 억제하기 위해 사용할 수있는 "제거"이벤트를 발생시킵니다. "remove"이벤트를 수신하는 콜백 인 경우 컬렉션에서 모델이 제거되는 인덱스는 options.index로 사용할 수 있습니다.

이렇게하고 싶다면 클릭 이벤트에서 제거 할 모델을 가져올 수있는 방법이 있어야합니다.

1. 이벤트 핸들러가 ID를 잡을 수 있도록이 호출 될 때, (A data-id 속성으로 말하자면) 이벤트를 트리거하는 요소 모델의 ID를 추가하고 사용이 작업을 수행하는 두 가지 방법이 기본적으로 모델을 가져오고 (이 경우 컬렉션에서 제거합니다).
2. 렌더링 된 각 모델에 대한 하위보기를 작성하면 id 속성이 필요하지 않습니다.

내가 한 번 봐 (I 기본적으로 여기에 그를 의역했습니다)를 갖는 것을 권 해드립니다 각 방법의 장단점에 great post by Derick Bailey 있습니다.

희망이 있습니다.