Question

我广泛使用 templates ，我喜欢使用完整包含的模板。我的意思是我想在模板代码中看到包括 root 在内的所有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代码中定义 root 元素及其属性。我认为这是丑陋和令人困惑的。

那么，有什么好方法可以避免我的Backbone View用额外的DOM元素包装我的模板？

我一直在检查这个问题主题：https://github.com/documentcloud/backbone/issues/546并且我知道没有任何正式方法可以做到这一点..但也许你可以推荐我非官方的方式。

Answer 1

您可以利用view.setElement呈现完整的模板，并将其用作视图元素。

setElement view.setElement（element）
如果您想将Backbone视图应用于其他DOM元素，请使用setElement 还可以创建缓存的$ 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/

Answer 2

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

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

这是一个有效的RFC

Answer 3

Backbone.Decarative.Views为您提供了另一种方法，无需依赖setElement。有关更多信息，请查看my answer here。

骨干，而不是“this.el”包装

3 个答案: