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

在Backbone Collection中，通过链接自行删除模型

1 个答案: