主干，而不是“this.el"包裹 [英] Backbone, not "this.el" wrapping

问题描述

我广泛使用模板，我喜欢使用完整的模板.我的意思是我想在 template 代码中看到所有 DOM 元素，包括 root 元素，就像这样:

但是 Backbone 喜欢的是有一个像这样的模板:

并在 JS 代码中定义 root 元素及其属性.我认为这是丑陋和令人困惑的.

那么，有什么好方法可以避免我的主干视图用额外的 DOM 元素包装我的模板?

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

解决方案

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

<块引用>

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

你必须考虑的两点:

1. setElement 调用 undelegateEvents，处理视图事件，但要小心删除您可能自己设置的所有其他事件.
2. setElement 不会将元素注入 DOM，您必须自己处理.

也就是说，您的视图可能如下所示

var FullTemplateView = Backbone.View.extend({渲染:函数(){var html, $oldel = this.$el, $newel;html =/**但是你构建你的html:通过模板，硬编码，...... **/;$newel = $(html);//重新绑定并替换视图中的元素this.setElement($newel);//重新注入 DOM 中的元素$oldel.replaceWith($newel);返回这个；}});

还有一个使用 http://jsfiddle.net/gNBLV/7/ 的工作示例

I do an extensive use of templates, and I like to use full contained templates. I mean that I want to see in the template code all the DOM elements including the root one, like this:

<script type="text/template" id="template-card">
  <div class="card box" id="card-<%= id %>">
    <h2><%= title %></h2>
    <div><%= name %></div>
  </div>
</script>

But what Backbone likes is having a template like this:

<script type="text/template" id="template-card">
  <h2><%= title %></h2>
  <div><%= name %></div>
</script>

And defining the root element and its attributes in the JS code. What I think is ugly and confusing.

So, any good way to avoiding my Backbone View to wrapper my template with an extra DOM element?

I have been checking this issue thread: https://github.com/documentcloud/backbone/issues/546 and I understand there is not any official way to do it.. but maybe you can recommend me a non official way.

解决方案

You can take advantage of view.setElement to render a complete template and use it as the view element.

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

Two points you have to account for:

1. setElement calls undelegateEvents, taking care of the view events, but be careful to remove all other events you might have set yourself.
2. setElement doesn't inject the element into the DOM, you have to handle that yourself.

That said, your view could look like this

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

And a working example to play with http://jsfiddle.net/gNBLV/7/

这篇关于主干，而不是“this.el"包裹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！