3

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);
  }

});

divonHoverBoxClickをクリックすると、各要素がイベントを発生させると思っていました。.hoverboxしかし、それは何もしません。これをビューに追加すると:

el: "#mydiv"

次に、イベントを発生させますが、GalleryItemView ごとに発生します。(したがって、8 つのサブビューの場合、8 つの console.logs も取得し、1 つだけをクリックしました)

サブビューの私のテンプレートは次のようになります。

<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);  
  }
});

それはなぜですか?? ありがとう...

4

1 に答える 1

6

eventsBackbone ビューでハッシュを指定すると、Backbone は jQuery .delegate メソッドを使用して、ビューelをルート要素としてコールバックをバインドします。ただし、GalleryItemView.render メソッドでは、実際にはビューの el にレンダリングしていません。まったく別の要素を選択しています。このため、イベントは実際には、イベント ハッシュの範囲外で発生しています。

代わりに、このようなことをする必要があります

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

現在のコードを見ると、GalleryView で定義した render メソッドは、一連の空の<div>タグを追加しているだけです。ページ上の既存の要素を選択し、補間されたテンプレートを GalleryViewItem.render メソッド内に追加しているという事実が、アイテムを実際に表示する原因となっています。

[[PART 2]] 編集したビューで、ID セレクターを のelプロパティとして提供しましたGalleryItemView。このため、さらに を使用して各アイテム ビューをレンダリングする方法により.append()、すべてGalleryItemViewのインスタンスを同じ要素にアタッチすることになります。それらはすべて同じルート要素を共有しているため、イベントが委譲されると、1 つのイベントによってすべてのハンドラー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);  
  }
  ...
});
于 2012-10-31T19:31:02.397 に答える