在Backbone Collection中，通過鏈接本身刪除一個模型

Question

我只是試圖從一個集合中刪除一個模型，並在鏈接本身。 我已經將事件附加到「Eliminar按鍵」，但它似乎林失去了參考包含它的模型元素......並不能找到它...你？：

(function ($) { 

    //Model 
    Pelicula = Backbone.Model.extend({ 
      name: "nulo", 
      link: "#", 
      description:"nulo" 
    }); 

    //Colection 
    Peliculas = Backbone.Collection.extend({ 
     initialize: function (models, options) { 
      this.bind("add", options.view.addPeliculaLi); 
      this.bind("remove", options.view.delPeliculaLi); 
     } 
    }); 

    //View 
    AppView = Backbone.View.extend({ 
      el: $("body"), 
      initialize: function() { 

      this.peliculas = new Peliculas(null, { view: this }); 
      //here I add a couple of models 
      this.peliculas.add([ 
       {name: "Flying Dutchman", link:"#", description:"xxxxxxxxxxxx"}, 
       {name: "Black Pearl", link: "#", description:"yyyyyyyyyyyyyy"} 
      ]) 
     }, 

     events: {"click #add-movie":"addPelicula", "click .eliminar":"delPelicula"}, 

     addPelicula: function() { 
      var pelicula_name = $("#movieName").val(); 
      var pelicula_desc = $("#movieDesc").val(); 
      var pelicula_model = new Pelicula({ name: pelicula_name },{ description: pelicula_desc }); 
      this.peliculas.add(pelicula_model); 
     }, 

     addPeliculaLi: function (model) { 
      var str= model.get('name').replace(/\s+/g, ''); 
      elId = str.toLowerCase(); 
      $("#movies-list").append("<li id="+ elId +"> <a href="+ model.get('link')+">" + model.get('name') + "</a> <a class='eliminar' href='#'>Eliminar</a> </li>"); 
     }, 

     delPelicula: function (model) { 
      this.peliculas.remove(); 
      console.log("now should be triggered the -delPeliculaLi- event bind in the collection") 
     }, 

     delPeliculaLi: function (model) { 
      console.log(model.get('name')); 
      $("#movies-list").remove(elId); 
     } 

    }); 

    var appview = new AppView; 

})(jQuery); 

---

而我的HTML是：

<div id="addMovie"> 
    <input id="movieName" type="text" value="Movie Name"> 
    <input id="movieDesc" type="text" value="Movie Description"> 
    <button id="add-movie">Add Movie</button> 
</div> 

<div id="lasMovies"> 
<ul id="movies-list"></ul> 
</div> 

Answer 1

有這個代碼是行不通的幾件事情。這裏的主要問題是，你不告訴你的集合要刪除哪個模型。所以在你的html中你必須分配如此唯一的id，以便識別你的模型。

// set cid as el id its unique in your collection and automatically generated by collection 
addPeliculaLi: function (model) { 
    $("#movies-list").append("<li id="+ model.cid +"> <a href="+ model.get('link')+">" + 
    model.get('name') + "</a> <a class='eliminar' href='#'>Eliminar</a> </li>" 
); 
}, 

// fetch and delete the model by cid, the callback contains the jQuery delete event 
delPelicula: function (event) { 
    var modelId = this.$(event.currentTarget).attr('id'); 
    var model = this.peliculas.getByCid(modelId); 
    this.peliculas.remove(model); 
    // now the remove event should fire 
}, 

// remove the li el fetched by id 
delPeliculaLi: function (model) { 
    this.$('#' + model.cid).remove(); 
} 

如果沒有其他錯誤，我忽略了你的代碼現在應該工作。這只是一個快速修復。也許你應該看看Backbone的todos例子，以獲得一些模式如何構建你的應用程序。

http://documentcloud.github.com/backbone/examples/todos/index.html