BackboneJs destroy()

时间:2013-11-22 20:38:54

标签: backbone.js slim destroy notorm

我有这个简单的BackboneJs应用程序。我正在使用Slim Framework和NotORM。 我的问题是,当我添加新的“任务”(View)时,元素被添加到DOM,数据被添加到数据库。但是,在我想要单击删除(izbrisi)后立即添加View后,它会从DOM中删除它,而不是从数据库中删除它。 (没有删除请求发送)。刷新页面后,点击删除按钮(izbrisi)一切正常。

   (function(){

    window.App = {
      Models:{},
      Collections: {},
      Views : {}
    }

    window.template = function(id) {
    return _.template( jQuery('#' + id).html());
    }


     App.Models.Parti = Backbone.Model.extend({

               defaults: {


               },

               initialize:function()
               {

               },

               urlRoot: 'http://localhost/BackboneJS/vjezba6/server/index.php/task'

     });

     App.Collections.Partiji = Backbone.Collection.extend({

         model: App.Models.Parti,
         url: 'http://localhost/BackboneJS/vjezba6/server/index.php/task',

     });

     App.Views.Parti = Backbone.View.extend({

        tagName :"div",
        className: "box shadow aktivan",

        template: template("boxovi"),

        initialize: function() {
        //this.model.on('change', this.render, this);
        this.model.on('destroy', this.ukloni, this);


        },

        events: {
        'click #izbrisi': 'izbrisiItem',
        },

        izbrisiItem: function()
        {
          this.model.destroy();

        },

        ukloni:function()
        {
          this.$el.remove();
          console.log("frag");

        },

        render: function() {
            var template = this.template( this.model.toJSON() );

            this.$el.html(template);

            return this;
        }   
    });

     App.Views.Partiji = Backbone.View.extend({

         tagName:"div",
         id: "nosac-boxova",

        initialize: function() {
            this.collection.on('add', this.dodajPartyView, this);

            },

        render: function() {
        this.collection.each(this.dodajPartyView, this);

        return this;
        },

        dodajPartyView: function(party) {
        var partyView = new App.Views.Parti({ model: party });

        this.$el.append(partyView.render().el);
        }

    });

     App.Views.Dodaj =  Backbone.View.extend({

        tagName: "div",
        id: "dodajParty",
        template: template("dodajTemp"),
        events:{
           "submit": "submit"
        },

        submit: function(e)
        { 
               e.preventDefault();

               var inpNaziv =  $(e.currentTarget).find('.naziv').val();
               //var inpLokal =  $(e.currentTarget).find('.lokal').val();
               //var inpDatum =  $(e.currentTarget).find('.datum').val();
               var inpOpis =  $(e.currentTarget).find('.opis').val();



               var party = new App.Models.Parti
               ({
                    naziv: inpNaziv,
                    //lokal : inpLokal,
                    //datum : inpDatum,
                    tekst: inpOpis   

               });

              // this.collection.add(party);
               this.collection.create(party);


        },

        render: function() {
        var template = this.template();

        this.$el.html(template);

        return this;
        }   



    });



var kolekcijaPartija = new App.Collections.Partiji;
kolekcijaPartija.fetch();

var dodajView = new App.Views.Dodaj({collection:kolekcijaPartija});
$("div#sidebar-right").prepend(dodajView.render().el);

var partijiView = new App.Views.Partiji({collection: kolekcijaPartija});
$("div#content").prepend(partijiView.render().el);

})();

编辑1

App.Views.Partiji = Backbone.View.extend({

         tagName:"div",
         id: "nosac-boxova",

        initialize: function() {

            //this.collection.on('add', this.dodajParty, this);
            //this.collection.on('reset', this.dodajPartyView, this);

            },

        render: function() {
        //this.collection.each(this.dodajParty, this);
          console.log(this.collection.length);

        //return this;
        },

        dodajParty: function(party) {
            var partyView = new App.Views.Parti({ model: party });

            this.$el.append(partyView.render().el);

        }


    });

退回0

1 个答案:

答案 0 :(得分:0)

你需要替换它:

this.model.on('destroy', this.ukloni, this);

有了这个:

this.model.on('remove', this.ukloni, this);

你的'事​​件'将它从DOM中删除,当Backbone检测到它将运行你的函数'ukloni'