Backbone js：如何删除视图中的额外标签？

我有以下模板：

 
 ....  

以及以下观点：

  var TestView = Backbone.View.extend({ tagName: "div", template: $("#tests_template"), initialize: function () { _.bindAll(this, 'clickbtn'); }, events: { "click .btn": "clickbtn" }, render: function () { .... { }); 

问题是，它产生以下输出：

 
... 

我如何摆脱外部div？ 我尝试从视图中删除tagName属性，但它仍然放一个div？

Answer 1

更改模板以摆脱外部div：

 
 .... 

然后，告诉视图使用类名创建div：

 tagName: "div", className: "row" 

或者，如果您想保留当前模板，请告诉View使用哪个el （假设它已存在于您页面上的某个位置）：

 var testView = new TestView({el: $(".row")}); 

编辑你问你是否可以在初始化程序中执行此操作？ 当然，但您需要确保挂钩事件：

 initialize: function () { this.el = $(".row"); this.delegateEvents(); _.bindAll(this, 'clickbtn'); } 

不过，老实说，前两个选项是更加去耦合的IMO。

Answer 2

另一个不需要修改模板的选项是使用setElement

setElement view.setElement（element）

如果您想将Backbone视图应用于不同的DOM元素，请使用setElement，它还将创建缓存的$ el引用，并将视图的委托事件从旧元素移动到新元素。

这将允许您完全绕过tagName。 您可以将tagName从View定义中删除（它默认为div）。 您也不必担心手动委派您的事件或要求事先知道@Brian Genisio在答案中提到的元素选择器，尽管其他方法也可以。

 render: function () { this.setElement(this.template(this.model.toJSON())); return this; }