backbone.js – 骨干,而不是“this.el”包装

我做了大量使用模板,我喜欢使用完全包含的模板。我的意思是,我想在模板代码中看到所有的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代码中定义根元素及其属性。我认为是丑陋和混乱。

所以,任何好的方法,以避免我的骨干视图包装我的模板与额外的DOM元素?

我一直在检查这个问题的线程:https://github.com/documentcloud/backbone/issues/546,我明白没有任何官方的方式来做它..但也许你可以推荐一个非官方的方式。

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

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,照顾视图事件,但要小心删除所有你可能已经设置的其他事件。
> 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/

http://stackoverflow.com/questions/11594961/backbone-not-this-el-wrapping

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:backbone.js – 骨干,而不是“this.el”包装