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 div时触发.hoverbox事件。但它没有任何作用。如果我将其添加到视图：

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

当您在Backbone视图上指定events哈希时，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方法中附加插值模板的事实实际上是导致您的项目出现的原因。

[[第2部]] 使用已修改的视图，您已在el上提供了ID选择器作为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);  
  }
  ...
});

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

1 个答案: