骨干，而不是“this.el”包装
我广泛使用模板 ，我喜欢使用完整的模板。 我的意思是我想在模板代码中看到所有的DOM元素，包括根元素，就像这样：
<script type="text/template" id="template-card"> <div class="card box" id="card-<%= id %>"> <h2><%= title %></h2> <div><%= name %></div> </div> </script> 但Backbone喜欢的是有这样一个模板 ：
<script type="text/template" id="template-card"> <h2><%= title %></h2> <div><%= name %></div> </script>
在JS代码中定义根元素及其属性。 我认为是丑陋和混乱。
那么， 是否有避免使用Backbone View来使用额外的DOM元素封装模板的好方法呢？
我一直在检查这个问题的线程： https ： //github.com/documentcloud/backbone/issues/546 ，我明白没有任何官方的方式来做到这一点..但也许你可以推荐我一个非官方的方式。
您可以利用view.setElement来渲染完整的模板，并将其用作视图元素。
setElement view.setElement（element）
如果您想将Backbone视图应用于不同的DOM元素，请使用setElement，它还会创buildcaching的$ el引用，并将视图的委托事件从旧元素移至新元素
有两点你必须考虑：
-
setElement调用undelegateEvents，负责处理视图事件，但要小心删除您自己设置的所有其他事件。 -
setElement不会将元素注入到DOM中，您必须自己处理。
也就是说，你的看法可能是这样的
var FullTemplateView = Backbone.View.extend({ render: function () { var html, $oldel = this.$el, $newel; html = /**however you build your html : by a template, hardcoded, ... **/; $newel = $(html); // rebind and replace the element in the view this.setElement($newel); // reinject the element in the DOM $oldel.replaceWith($newel); return this; } });
和一个工作的例子来玩http://jsfiddle.net/gNBLV/7/
现在你也可以定义一个视图的tagName作为一个函数，并像这样创build一个类：
var MyView = Backbone.View.extend({ template: '#my-template', tagName: function() { // inspect the template to retrieve the tag name }, render: function() { // render the template and append its contents to the current element } });
这是一个工作的例子
Backbone.Decarative.Views为您提供了一种替代方法，无需依赖setElement 。 更多，请查看我的答案在这里 。
