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

Question

我有一个带有许多.element子对象的#root 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>

我希望每个.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 });
});

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