正确定位'el`和`$ el`

Question

我有一个#root有很多.element孩子的DOM对象:

<div id='root'>
  <div class='element'>
    <span>Element 1</span>
  </div>
  <div class='element'>
    <span>Element 2</span>
  </div>
  <div class='element'>
    <span>Element 3</span>
  </div>
</div>

我想要一个Backbone View实例.element.这是我尝试过的:

var ElementView = Backbone.View.extend({
  initialize: function () {
    _.bindAll(this, 'showText');
    this.setElement('.element');
  },
  events: {
    'click span': 'showText'
  },
  showText: function () {
    console.log('You have clicked ' + $el.text());
  }
});

我将我的观点初始化如下:

new ElementView({ model: modelInstance });

问题是.element不够精确,$el将$('.element')[0]用于每次初始化.我该如何处理许多元素具有相同CSS选择器的情况？

Answer 1

使用关联元素初始化视图:

$(".element").each(function(ix,el) {
    new ElementView({ model: modelInstance , el:el });
});

不要忘记this.setElement('.element');在initialize代码中删除.