Backbone - 对同一个集合使用不同的视图或模板答案

【问题标题】：Backbone - use different views or templates for same collectionBackbone - 对同一个集合使用不同的视图或模板
【发布时间】：2014-01-23 10:09:20
【问题描述】：

我的应用程序的基本模型有一个status 属性。为简单起见，我们假设该状态可能是pending或deleted。

我有一个包含这两个状态值的上层菜单，当您单击其中一个时，您会看到所有具有此状态的对象（我使用路由器来触发过滤器）。

我的问题是我需要为每个状态绘制不同的模板。

deleted 对象有 delete forever 和 recover 按钮
pending 对象有 delete、edit 和一些其他按钮（还有一些 textarea...）

我想知道这个问题的最佳解决方案是什么。
我想为每个状态创建一个不同的视图，但是我不知道如何在集合级别处理它。
我也想过创建不同的模板并在模型视图级别处理它，但同样 - 我不知道这是否可能，如果可以 - 如何。

最后，我可以用相同的模板和视图来解决它，将不需要的东西隐藏在视图中，但在我看来，代码变得非常难看。

想法？？谢谢！

【问题讨论】：

标签： backbone.js backbone-views

【解决方案1】：

如果你想为每个状态创建不同的视图，你可以这样做：

Router {

    clickDeletedMenu : {

        var collection = new MyCollection();
        var deletedView = new DeletedView({ model : collection });

        collection.fetch({ status : 'deleted' }); // filter deleted objects
    },

    clickPendingMenu : {

        var collection = new MyCollection();
        var pendingView = new PendingView({ model : collection });

        collection.fetch({ status : 'pending' }); // filter deleted objects
    },

}

如果你想创建不同的模板，你可以这样做：

View {

    render : {

        if (this.model.status == 'deleted') {
            // render deleted template
        } else {
            // render pending template
        }
    }
}

最后，在我看来，您可以使用相同的模板和视图，并将不需要的内容隐藏在模板中而不是视图中。

nb ：代码仅用于说明想法，它不会执行:)

【讨论】：

谢谢，太好了！实际上我得到了另一种解决方案。我创建了一个 viewBase，我将其扩展到 viewDeleted 和 viewPending（参见 stackoverflow.com/a/9424768/1039488），然后在集合中我执行 var viewClassName = item.get('status') + "View" 并使用 eval 创建相应的视图。我这样做是因为我发现将所有内容放在同一个集合中更容易（这是我的第一个主干应用程序......）