backbone.js - 如何避免 Backbone.js 中类似 View 的模板中的重复代码和逻辑

Question

我正在使用 backbone.js 构建一个应用程序，并发现自己在模型 View 的模板化中有一个包含大量条件逻辑的 View 。模型的 type 属性用于确定要呈现的 html。如果可能的话，我想避免这种逻辑，因为它很难阅读。我认为有几种方法可以处理这个问题(请注意，我在这里得到的实际模板非常简单):

<强>1。 Collection View 中的条件逻辑而不是模型 View 中的条件逻辑 - 多个 subview

我可以将作用于每个模型类型的条件逻辑放入 Collection View 中:

var CollectionView = Backbone.View.extend({
    ....
    render: function() {
        this.collection.each(function(thing) {
            if(thing.get("type") === "wotsit") {
                this.$el.append(new WotsitView({ model: thing });
            } else if(thing.get("type") === "oojamaflip") {
                this.$el.append(new OojamaflipView({ model: thing });
            }
        }, this);
    },
    ....
}

优点这样我就可以让每个 subview 都有一个模板方法，其中没有逻辑，而只是构建 html。

var WotsitView = new Backbone.View.extend({
    ....
    template: _.template('<h2>{{ title }}</h2>');
});
var OojamaflipView = new Backbone.View.extend({
    ....
    template: _.template('<h3>{{ title }}</h3>');
});

缺点问题是，集合中的 thing 都非常相似。每个 thing 的 events 可能相同或非常相似，我可以看到有很多代码重复。我真的只希望这些 subview 的实际模板与其他所有相同的模板不同。

<强>2。模型 View 中的条件逻辑 - 多个模板方法

var ModelView = Backbone.View.extend({
    ....
    render: function() {
        if(this.model.get("type") ==== "wotsit") {
            this.$el.html(this.wotsitTemplate(this.model.attributes));
        } else if(this.model.get("type") === "oojamaflip") {
            this.$el.html(this.oojamaflipTemplate(this.model.attributes));
        }
    },
    wotsitTemplate: _.template('<h2>{{ title }}</h2>'),
    oojamaflipTemplate: _.template('<h3>{{ title }}</h3>')
});

优点模型只有一个 View 。所有事件等都是一个 View 中的句柄，而不是重复的。

缺点我实际上非常喜欢这种方式，但我很想听听其他人对此的选择。

Answer 1

选项 #1 = 多态性

选项 #2 = switch 语句

如果您从不(或很少)必须添加新类型，但您可能想添加新方法，则 Switch 语句很有用。想象一下，您想要向 ModelView 添加一个 validate 方法，该方法检查该模型的 View 输入的正确性并将结果报告给用户。使用选项 #2，您只需添加一个新方法来切换模型类型(就像 render 方法一样)来处理验证。

现在假设我们已经有了一个render 方法和一个validate 方法，我们想要处理一种新型模型，一个thingamajig。使用选项 #2，您必须向 render 和 validate 添加逻辑。现在想象一下，我们不仅有 2 个方法，还有 10 个方法——当您必须处理新类型时，选项 #2 会变得非常复杂。但是如果我们遵循选项 #1，那么无论有多少方法，我们只需要在一个地方创建一个新 View ，并更新 CollectionView 以将新类型映射到新 View .

大多数时候多态性(选项#1)是最干净的方式。它让您可以分离所有特定于给定类型的逻辑并将其放在一个地方，从而轻松处理新类型。

保持干燥

如果您担心选项 #1 最终会导致所有 View 之间出现大量重复代码，请不要忘记创建从其他主干 View 继承的 View 很容易:

var ItemView = Backbone.View.extend({
    initialize: function() {
        /* some common logic for all views */
    }
});
var WotsitView = ItemView.extend({
    template: _.template('<h2>{{ title }}</h2>')
});
var OojamaflipView = ItemView.extend({
    template: _.template('<h3>{{ title }}</h3>')
});