backbone.js - 主干，不是 "this.el"换行

Question

我广泛使用模板，我喜欢使用完整的模板。我的意思是我想在模板代码中看到所有的 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而且我知道没有任何官方方式可以做到这一点..但也许你可以向我推荐一种非官方方式。

Answer 1

您可以利用 view.setElement 渲染一个完整的模板并将其用作 View 元素。

setElement view.setElement(element)
If you'd like to apply a Backbone view to a different DOM element, use setElement, which will also create the cached $el reference and move the view's delegated events from the old element to the new one

您必须考虑两点:

setElement来电undelegateEvents , 处理 View 事件，但要小心删除您可能自己设置的所有其他事件。

setElement不会将元素注入(inject) DOM，您必须自己处理。

也就是说，您的 View 可能看起来像这样

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/ 的工作示例