骨干,而不是“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引用,并将视图的委托事件从旧元素移至新元素

有两点你必须考虑:

  1. setElement调用undelegateEvents ,负责处理视图事件,但要小心删除您自己设置的所有其他事件。
  2. 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 。 更多,请查看我的答案在这里 。