Question

我刚才意识到我误解了el的{{1}}属性。基本上我的视图需要基于其模型属性的动态Backbone.View属性。我认为我的工作正常，因为我只是在我的模板中指定它：

id

但是，我意识到Backbone实际上在做的是将这个编译的模板放到另一个元素中，<script type="text/template" id="item_template"> <li class="item" id="{{identifier}}"> <span class="name">{{name}}</span> </li> </script>默认情况下。我通过阅读文档了解了更多相关信息，但我仍然对如何创建动态div感到困惑。

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

我尝试在id方法initialize中进行设置，但似乎没有任何效果，可能是因为到目前为止已经太晚了。

我目前正在做的只是使用jQuery在this.id = this.model.get('attr')期间添加id：

render()

它有效，但当然，我只是想询问是否有一种首选的方式通过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});

具有动态id的骨干视图

3 个答案: