Backbone.js 主干，而不是；这是“el”；包装

我广泛使用模板，我喜欢使用完整的模板。我的意思是，我希望在模板代码中看到所有DOM元素，包括根元素，如下所示：

<script type="text/template" id="template-card">
  <div class="card box" id="card-<%= id %>">
    <h2><%= title %></h2>
    <div><%= name %></div>
  </div>
</script>

<script type="text/template" id="template-card">
  <h2><%= title %></h2>
  <div><%= name %></div>
</script>

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

但是主干网喜欢的是有这样一个模板：

<script type="text/template" id="template-card">
  <div class="card box" id="card-<%= id %>">
    <h2><%= title %></h2>
    <div><%= name %></div>
  </div>
</script>

<script type="text/template" id="template-card">
  <h2><%= title %></h2>
  <div><%= name %></div>
</script>

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

以及在JS代码中定义根元素及其属性。我认为是丑陋和混乱的

那么，有没有什么好办法可以避免主干视图用额外的DOM元素包装我的模板呢

我一直在检查这个问题的线索：我知道没有任何正式的方式来做这件事。。但也许你可以向我推荐一种非官方的方式。

你可以利用它来呈现一个完整的模板，并将其用作视图元素

setElementview.setElement（element）
如果希望将主干视图应用于不同的DOM元素，请使用setElement，它将 同时创建缓存的$el引用并移动视图的 从旧元素到新元素的事件

你必须考虑两点：

setElement

调用

undelegateEvents

，负责查看事件，但要小心删除您自己可能设置的所有其他事件

setElement

不会将元素注入DOM，您必须自己处理

也就是说，你的观点可能是这样的

var FullTemplateView=Backbone.View.extend({
渲染：函数（）{
var html，$oldel=this.$el，$newel；
html=/**但是您构建您的html：通过一个模板，硬编码，…**；
$newel=$（html）；
//重新绑定并替换视图中的图元
这个.setElement（$newel）；
//在DOM中重新注入元素
$oldel.replaceWith（$newel）；
归还这个；
}
});

---

现在，您还可以将视图的标记名定义为函数，并创建如下类：

<script type="text/template" id="template-card">
  <div class="card box" id="card-<%= id %>">
    <h2><%= title %></h2>
    <div><%= name %></div>
  </div>
</script>

<script type="text/template" id="template-card">
  <h2><%= title %></h2>
  <div><%= name %></div>
</script>

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

---

这里有一个可行的方法

为您提供了一种替代方法，无需依赖于

setElement

。有关更多信息，请查看。

渲染完整模板并使用setElement如何？@nikoshr，请详细说明一个最低限度的答案，我接受。它在我的实验中起作用。唯一的问题是，在模板渲染后，我必须在

render（）

方法中使用

setElement（）

。好的，我一拿到真正的键盘就会发布答案。将模板包装在空DIV中有什么问题？然后，您可以正确地使用主干，同时仍然保持完整包含的模板DOM结构完全改变了对CSS选择器的影响。最重要的是：我觉得很难看周围所有这些僵尸div元素。另外，在我的上一个特例中，我正在处理可拖动的元素，而额外的

div

正在添加奇怪的行为。如果模板没有主元素呢？我很确定这会帮我解决问题，但事实并非如此。不过，我们使用的是

insertAfter

而不是

replacetwith

。像这样使用它：

this.render（）.$el.insertAfter（$oldel）

将完全按照您对replaceWith的期望执行，但也会保留所有事件（只要您执行类似

this.$el.html（this.template（this.model.toJSON（））；

内部

呈现（）

的操作，这是正确的呈现方式（特别是动态列表项）因为它使呈现方法是幂等的。请注意，

setElement

可以直接获取html字符串，并负责从中生成jQuery对象。@Hontoni如果模板没有根元素，这就违背了这里的要点。您应该只使用主干创建的标记名（默认或重写的

标记名

）或者将模板封装在一个主元素中。主干视图必须是唯一的元素，不能是元素数组。这充其量只是黑客行为，依赖于通过附加子元素来剥离模板的第一个标记…@EmileBergeron为什么黑客行为？我的解决方案不是定义任何代码，只是一个你必须实现的约定er最适合您。示例中的代码并不是通用的解决方案。另一方面，我认为在“render”方法中使用“setElement”会影响性能。它只是

this.setElement（this.template）的一个更糟糕的版本

。我想不出这种解决方案会有更好和/或更高效的情况。您根本不了解它。漏洞在于不在渲染方法内部使用

setElement

，因为这是重新连接所有事件侦听器！我的示例中的渲染方法只是替换视图内容。

setElement

>负责取消对DOM事件（）的委派和重新Delagation。这是您修改过的示例，它是

setElement

的全部功能。