Verwijder in Backbone Collection een model per link op zichzelf

Ik probeer gewoon een model uit een verzameling te verwijderen, met een link op zichzelf. Ik heb het evenement gekoppeld aan de "Eliminar-knop" maar het lijkt erop dat ik de verwijzing naar het modelelement dat het bevat, kwijtraak ... en het niet kan vinden .. kan dat ?:

(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("
  • " + model.get('name') + " Eliminar
  • "); }, 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);

    En mijn html is:

    <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">
     
      </div>
      0

      1 antwoord

      Er zijn verschillende dingen in deze code die niet werken. Uw grootste probleem hierbij is dat u uw verzameling niet vertelt welk model moet worden verwijderd. Dus in je html moet je een zo uniek ID toewijzen dat later je model zal identificeren.

      // set cid as el id its unique in your collection and automatically generated by collection
      addPeliculaLi: function (model) {
        $("#movies-list").append("
    • " + model.get('name') + " Eliminar
    • " ); }, // 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(); }

      Als er geen andere fouten zijn die ik heb over het hoofd gezien, zou uw code nu moeten werken. Dit is slechts een snelle oplossing. Misschien moet je eens kijken naar het todos-voorbeeld van Backbone om wat patronen te vinden voor het structureren van je app.

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

      1
      toegevoegd
      Geweldig dat was de controle die ik nodig heb. Ik hoefde alleen maar een paretn() waarde toe te voegen aan het element dat de gebeurtenis propageert in delPelicula var modelId = this. $ (Event.currentTarget) .parent (). Attr ('id'); om de hele LI te verwijderen. Bedankt
      toegevoegd de auteur asael2, de bron