仅使用模板构建主干视图答案

【问题标题】：Use only template to build backbone view仅使用模板构建主干视图
【发布时间】：2015-06-26 01:35:58
【问题描述】：

var ItemView = Backbone.View.extend({
    tagName:"li",
    className:"l-item",
    template:_.template("#tpl-list-item"),
    .....
});

var ListView  = Backbone.View.extend({
    render:(){
        this.collection.each(function(model){
            this.$el.append(new ItemView({model:model}).render().$el);
        });
    }
});

<script id="tpl-list-item" type="text/template">
    <div>
        // other markup
    <div>
</script>

如图所示，一旦我想更新 itemview 的表示，我将不得不检查 js 和模板文件。

而且我更喜欢从模板构建视图，只是为了避免在代码中设置表示，例如：

<script id="tpl-list-item" type="text/template">
    <li class="....">
        <div>
            // other markup
        <div>
    </li>
</script>

这可能吗？

【问题讨论】：

标签： backbone.js backbone-views

【解决方案1】：

您可以使用setElement 替换视图的el：

setElement view.setElement(element)

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

实际上，它看起来像这样：

var ItemView = Backbone.View.extend({
    template: _.template("#tpl-list-item"),
    render: function() {
        this.setElement(this.template(this.model.toJSON()));
        return this;
    },
    //...
});

和ListView 不需要更改。

演示：https://jsfiddle.net/ambiguous/fs9h6o09/

这种方法最终会创建并丢弃一堆<div> 节点，因为如果您不通过id 告诉它执行其他操作，视图将创建空的<div>s 作为el， className, ... 属性。这些额外的<div>s 可能不会产生任何明显的差异，但您可以使用一些el: '#no-such-id' 诡计来避免它们。

Backbone 没有设置太多的策略，但它确实想将el 与其中的内容分开。您不必遵循这一点，但按自己的方式行事会违反规定。

【讨论】：

【解决方案2】：

如果我正确理解您的问题，您想直接从模板构建 html 吗？

这可能不是一个好主意。视图应该处理模板的呈现。从技术上讲，尽管您可以执行以下操作：

var ListView  = Backbone.View.extend({
    render: function(){
        var itemTemplate = "#tpl-list-item";
        this.collection.each(function(model){
            this.$el.append(_.template(itemTemplate,{item:model}));
        });
    }
});

但是，这样做的问题是，现在如果需要修改 itemTemplate，它没有处理该逻辑的视图。为了使事情尽可能模块化，你最好通过它自己的视图来渲染模板，这样你就可以更新/销毁模板，但是你喜欢作为一个视图。视图的目的很简单：

将您的界面组织成由模型支持的逻辑视图，每个模型都可以在模型更改时独立更新，而无需重新绘制页面。 -Backbone.js

【讨论】：

【解决方案3】：

您可以避免使用setTemplate()，即白白地创建和丢弃节点，并且仍然将您的视图 HTML 全部保存在模板中的一个位置。

Backbone.Decarative.Views 为您提供了一种干净的方式来执行此操作。更多信息，请查看my answer here。

【讨论】：