Question

我有简单的Backbone.js应用程序。我想在View中单击一个按钮时调用jQuery模态插件。 Modals结构（html）的定义超出了View的定义。在Backbone.js中使用jquery的正确方法是什么？

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

        tagName :"div",
        className: "objava-single",


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


   events: 
    {
      'click #delete-objava': 'izbrisiObjavu',

    },

    remove: function() {
      this.$el.remove();
    },

    izbrisiObjavu: function(event)
        {

         var model = this.model;

         $(".modal-obrisi").modal();

         $(".dugme-obrisi").on("click", function(){

          model.destroy(); 

          $(".modal-obrisi").modal("hide");


         });

     }
 });

这种类型的代码会导致问题，尤其是缓存视图模型的这一部分。

var model = this.model;

此部分以某种方式在第二次删除时创建多个HTTP DELETE请求。

修改

Problem image

Answer 1

当您删除第二篇帖子时，您会看到两个请求，因为第一个$(".modal-obrisi").on尚未取消绑定。因此，如果您尝试删除第3个模型，它将触发3个请求，依此类推。

要解决此问题，您应该通过调用.off解除绑定。

$(".dugme-obrisi").on("click", function(){
    model.destroy(); 
    $(".modal-obrisi").off().modal("hide");
});

不带任何参数调用.off()将关闭该元素的所有事件侦听器。如果你想要更精细的控制，可以向它传递更多的过滤器参数。

OLD ANSWER

Backbone本来就是非指令性的，所以没有特别的“正确方法”来做事。

但我可以推荐几个选项，您可以从中选择最适合您特定应用的选项：

选项1：将模态选择器作为选项传递给视图，并使用选择器实例化模态。

// Parent
var view  = new App.Views.Objava({ modalSelector: ".dugme-obrisi" });
...

// View
App.Views.Objava = Backbone.View.extend({
    ...
    izbrisiObjavu: function(event) {
        $(this.options.modalSelector).modal();
    }
});

选项2：将回调传递给视图，让父级处理点击事件。

// Parent
var view  = new App.Views.Objava({ 
    callback: function() {
        $(".modal-obrisi").modal();
    } 
});
...

// View
App.Views.Objava = Backbone.View.extend({
    ...
    izbrisiObjavu: function(event) {
        if(this.options.callback) this.options.callback();
    }
});

选项3：将模态设为自己的Backbone视图。

// View
App.Views.Objava = Backbone.View.extend({
    ...
    izbrisiObjavu: function(event) {
        var modalView = new App.Views.ObjavaModal();
        this.$el.append(modalView.el);
        modalView.render();
    }
});

// Modal view
App.Views.ObjavaModal = Backbone.View.extend({
    render: function() {
        // Render the modal content here
        ...

        // Make this view a modal
        this.$el.modal();
    }
});

我确信还有很多方法，但这些只是少数几种。

从Backbone.js View中使用jquery模式时会触发多个HTTP请求

1 个答案: