Question

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>

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

我更喜欢从模板构建视图，以避免在代码中设置表示，如：

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

这可能吗？

Answer 1

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

setElement view.setElement(element)

如果您想将Backbone视图应用于其他DOM元素，请使用 setElement ，这也会创建缓存的$el引用并移动视图＆＃39;从旧元素到新元素的委托事件。

在实践中，它看起来像这样：

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>个节点，因为如果你不告诉它<div>，视图会创建空的el通过id，className，...属性执行其他操作。这些额外的<div>可能不会产生明显的差异，但您可以使用一些el: '#no-such-id'技巧来避免它们。

Backbone没有设定那么多政策，但它确实想要将el与其内部分开。你不必遵循这一点，但是你可以按照自己的方式对付谷物。

Answer 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

Answer 3

您可以避免使用setTemplate()，即无需创建和丢弃节点，并且仍然可以将视图HTML保存在模板中的所有位置。

Backbone.Decarative.Views为您提供了一种干净的方法。有关更多信息，请查看my answer here。

仅使用模板构建骨干视图

3 个答案: