骨干,而不是"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利用它来呈现完整的模板并将其用作视图元素.

setElement view.setElement(element)
如果您想将Backbone视图应用于其他DOM元素,请使用setElement,它还将创建缓存的$ 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/一起玩的实例