0

我有这个简单的 BackboneJs 应用程序。我正在使用 Slim 框架和 NotORM。我的问题是,当我添加新的“任务”(视图)时,元素被添加到 DOM,数据被添加到数据库中。但是,在我想单击删除(izbrisi)时添加视图后,它会立即将其从 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

4

1 回答 1

0

你需要替换这个:

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

有了这个:

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

您的“事件”将其从 DOM 中删除,当 Backbone 检测到该事件时,它将运行您的函数“ukloni”

于 2014-02-28T11:46:05.133 回答