子视图的骨干事件未正确触发

Question

我有一个Backbone画廊,由GalleryItem子视图组成.

我现在遇到的问题是事件没有在子视图上正确触发.

这是我的代码GalleryItemView:

// Gallery View: Displays a Single Image Element
var GalleryItemView = Backbone.View.extend({
  el: '#isotope',

  events: {
    "click .hoverbox": "onHoverBoxClick"
  },


  initialize: function () {
    this.template = Hogan.compile($("#gallery-item-template").html());
  },

  render: function () {
    this.$el.append(this.template.render(this.model.toJSON())); 
    return this;
  },
  onHoverBoxClick: function () {
    console.log("clicked: ", this.model.id);
  }

});

我希望每个元素onHoverBoxClick在单击.hoverboxdiv 时触发事件.但它没有任何作用.如果我将其添加到视图:

el: "#mydiv"

然后它会触发事件,但是对于每个GalleryItemView.(因此,对于8个子视图,我得到8个console.logs,我也只点击了一个)

我的子视图模板如下所示:

<script type="text/x-handlebars-template" id="gallery-item-template">
  <div class="item {{tags}}" style="width: auto;">
    <img class="eveimage" src="{{image_medium_url}}">
    <div class="hoverbox down"><span>{{tags}}</span>    </div>
</div>
</script>

并且库的集合视图看起来像这样(这是我实例化库项目的地方):

// Gallery View: Displays the main image / project gallery
window.views.GalleryView = Backbone.View.extend({
  el: '#isotope_container',
  className: 'no-transition',
  template: _.template($("#gallery-template").html()),

  initialize: function() {
    this.collection = new gallery();
    this.$el.append(this.template);
    this.collection.on('reset', this.render, this);
  },

  render: function(){  
    console.log("ich render nei");
    this.collection.forEach(this.addOne, this);  

  },  
  addOne: function(model){  
    var itemView = new GalleryItemView({model: model});
    var el = itemView.render().el;

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

任何想法为什么会这样？谢谢...

Answer 1

当您events在Backbone视图上指定哈希时,Backbone使用jQuery .delegate方法绑定回调,并将View el作为根元素.但是,在您的GalleryItemView.render方法中,您实际上并未渲染到视图的el; 你正在选择一个完全不同的元素.因此,事件实际上是在您的事件哈希作用范围之外触发​​的.

相反,你需要做这样的事情

window.views.GalleryItemView = Backbone.View.extend({
   ...
  render:function () {
    this.$el.append(this.template.render(this.model.toJSON())); 
    return this;
  }, 
  ...
});

查看当前代码,您在GalleryView上定义的渲染方法只是附加了一堆空<div>标记.您在页面上选择现有元素并在GalleryViewItem.render方法中附加插值模板这一事实实际上是导致您的项目出现的原因.

[[PART 2]]使用您编辑的视图,您已经提供了ID选择器作为el属性GalleryItemView.因此,除了使用渲染每个项目视图的方式之外.append(),您仍然将每个GalleryItemView实例附加到同一个元素.由于它们都共享相同的根元素,因此在委托事件时,一个事件将导致每个事件的处理程序GalleryItemView被调用.

您应该拥有的内容如下:

GalleryItemView = Backbone.View.extend({
  // remove the ID selector for the el property -- don't need it
  ...
  render:function() {
    this.$el.html(this.template.render(this.model.toJSON()));
    return this;
  }
  ...
});

window.views.GalleryView = Backbone.View.extend({
  ...
  addOne: function(model){  
    var itemView = new GalleryItemView({model: model});
    var el = itemView.render().el;

    // assuming you actually intended to attach all 
    // GalleryItemViews to the #isotope element
    this.$('#isotope').append(el);  
  }
  ...
});