具有动态id的骨干视图

Question

我才意识到我误解了ela 的属性Backbone.View.基本上我的视图需要id基于其模型属性的动态属性.我以为我的工作正常,因为我只是在我的模板中指定它:

<script type="text/template" id="item_template">
  <li class="item" id="{{identifier}}">
    <span class="name">{{name}}</span>
  </li>
</script>

但是,我意识到Backbone实际上正在做的是将这个编译的模板放到另一个元素中,div默认情况下.我通过阅读文档了解到了更多相关信息,但我仍然对如何创建动态感到困惑id.

最好是,我希望找到一种方法,使上面模板中的东西充当我el,因为它已经拥有我想要的一切,但我不知道这是否可行.所以我想知道是否有一种方法来指定动态id属性.

我尝试在initialize方法中设置它,this.id = this.model.get('attr')但它似乎没有任何影响,可能是因为此时已经太晚了.

我目前正在做的只是使用jQuery添加idin render():

this.el.attr(id: this.model.get('identifier'));

它有效,但当然,我只是想问是否有一种首选方法通过Backbone来实现.

Answer 1

是的,在Backbone中有一种标准的方法可以做到这一点.您可以传递id给View构造函数.您还可以重构模板,以便Backbone <li>为您创建父元素.试试这个更简单的模板:

<script type="text/template" id="item_template">
  <span class="name">{{name}}</span>
</script>

并将这些添加到您的视图中:

myView = Backbone.View.extend({
  className: "item",
  tagName: "li"
})

并像这样实例化它:

var view = new YourView({
  model: mymodel,
  id: mymodel.get('identifier') // or whatever
})

祝好运!

Answer 2

还有一种方法.我发现id每次创建视图实例时都比传递更方便.

模板:

 <script type="text/template" id="item_template">
      <span class="name">{{name}}</span>
 </script>

视图:

var MyView = Backbone.View.extend({
    tagName: 'li',
    attributes: function(){
       return { 
           id: this.model.get('identifier'),
           class: 'item'//optionally, you could define it statically like before
       }
    }
})