javascript - View 上的主干重新绑定(bind)事件

Question

我有两种观点，一种代表客户的观点，另一种是个别客户的观点。我在客户端 View 中绑定(bind) mouseenter 和 mouseleave 事件以淡入和淡出图像上的叠加层。单独使用时效果很好。但是，我还使用 jQuery 插件来实现轮播效果(插件 here)。启用后，我的自定义事件将不再有效。插件初始化后，有什么方法可以委托(delegate) Client View 事件吗？这是我第一次使用 Backbone，所以我也可能做错了其他事情。

代码如下:

// Client View
window.ClientView = Backbone.View.extend({
  tagName: 'li',
  template: _.template($("#client-template").html()),
  className: 'client-thumb',

  events: {
    "mouseenter": "fadeOutOverlay",
    "mouseleave": "fadeInOverlay"
  },

  initialize: function() {
  },

  render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
  },

  fadeOutOverlay: function() {
    $(this.el).find(".slider-image-overlay").fadeOut('fast');
  },

  fadeInOverlay: function() {
    $(this.el).find(".slider-image-overlay").fadeIn('fast');
  }

});

// Clients View
window.ClientsView = Backbone.View.extend({
  el: "#clients",

  initialize: function() {
    this.collection.bind('all', this.render, this);
  },

  render: function() {
    var $clients = $("<ul class='clearfix'></ul>");
    _.each(this.collection.models, function(client) {
      var view = new ClientView({model: client});
      $clients.append(view.render().el);
    });

    $(this.el).hide().append($clients).fadeIn().scrollingCarousel();

    return this;
  }
});

编辑:在这里，我尝试对创建的 View (具有事件的 View )delegateEvents():

App.View.ClientsView = Backbone.View.extend({
  el: "#clients",

  initialize: function() {
    this.collection.bind('all', this.render, this);
  },

  render: function() {
    var $clients = $("<ul class='clearfix'></ul>");
    var views = [];
    _.each(this.collection.models, function(client) {
      var view = new App.View.ClientView({model: client});
      views.push(view); // Store created views in an array...
      $clients.append(view.render().el);
    });

    $(this.el).hide().append($clients).fadeIn().scrollingCarousel({
      // Use the plugin's callback to try to delegate events again
      afterCreateFunction: function() {
        _.each(views, function(view){
          view.delegateEvents();
        });
      }
    });

    return this;
  }
});

试过了但似乎不起作用？我做对了吗？我认为该插件对 DOM 的作用超出了我的想象。看起来它正在触及我尝试绑定(bind)的元素以及绑定(bind)到 mouseenter 和 mouseleave 的元素。我对这个插件不熟悉，看起来没有未压缩的版本，所以我看不太清楚。

还有什么建议吗？

Answer 1

您可以使用 View 的 delegateEvents 方法来重新绑定(bind)您的事件

用法:myView.delegateEvents()

引用文档 http://backbonejs.org/#View-delegateEvents了解更多信息

编辑:

这个插件绑定(bind)和取消绑定(bind) mouseenter/leave 没有命名空间 - 打开插件脚本并将命名空间添加到事件绑定(bind)和取消绑定(bind)。

将这些修复应用到这些问题的每一次出现，即使没有 delegateEvents()

也应该没问题

r.unbind("mouseenter"); => r.unbind("mouseenter.carousel");r.unbind("mouseleave"); => r.unbind("mouseleave.carousel");

r.mouseenter(function() { ... => r.bind('mouseenter.carousel', function() { ...r.mouseleave(function() { ... => r.bind('mouseleave.carousel', function() { ...