具有动态 ID 的主干视图

Question

我刚刚意识到我误解了Backbone.View 的el 属性。基本上我的视图需要基于其模型属性的动态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 在render() 期间添加id：

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

Answer 3

创建视图时，传入一个选择器，让视图找到现有的预渲染 DOM 元素：

var id = "1234";
var view = YourView({el: '#'+id});