Backbone.js - 路由器，视图渲染和一般概念化

Question

我已经做了一些初级教程的阅读（包括《绝对初学者》、完全学习，以及2 Code School Backbone课程的大部分内容），我完全能够看到Backbone所提供的潜力。但是理解灯泡还没有完全亮起来...我认为大多数例子都是简单的待办事项应用程序，使得在开发更复杂的项目时看起来比实际情况要轻松得多。

我的实验进行得很顺利——到了一定程度——但我认为现在先回答下列零散的问题或反馈可能会节省我很多的挫折，并让我更快地上升到我想要的学习曲线。我试图包含相关片段作为详细性示例。

1）路由器很棒，但是否适合重任务？

以下路由器可将用户从初始页面加载移动到特定路径（搜索），该路径中的SearchBoxView在最后一个js中实例化，类似于TodoMVC示例中的app.js。然而，尝试像为SummaryResultsView设置视图一样在路由器中设置视图会生成“不是构造函数”的错误。

var Workspace = Backbone.Router.extend({
    routes: {
        '': 'default',
        'search': 'searchBox',
        'summary': 'summary',
        'detail': 'detail',
    },

    default: function() {
        console.log("Router: Default");
        track.Router.navigate("#search", { 
            trigger: true,
            replace: true
        });
    },

    searchBox: function () {
        console.log("Router: Search");
    },

    summary: function () {
        console.log("Router: Summary");
        new track.SummaryResultsView({ el: $("#summary #results")});
    },

我刚找到了一个链接：https://github.com/thomasdavis/backbonetutorials/blob/gh-pages/examples/modular-backbone/js/router.js，这个链接中的路由初始化行为与我的预期相似，所以我会尝试使用这种方法。

2) 你是否需要在渲染时构建大量状态逻辑的主页面视图？

通过上面的路由设置，每个路由将拥有多个视图，根据集合中的结果显示/隐藏或更改其呈现方式。在状态更改时设置要渲染的视图看起来是个好地方。TodoMVC示例中，app.js视图渲染函数执行了很多等效逻辑。

3) 如何在不使用require.js的情况下使用外部文件中的Underscore模板

我相信我最终会开始包含require.js - 但是为了简化学习曲线的一部分，我想先不使用它。此外，模板将从单独的CMS中提取字段标题，而目前还不确定它能否与AMD很好地协作。

4) 它是否可以帮助减少像colorbox和datatables这样的插件依赖？

我正在使用Backbone设计一个中等规模的应用程序，其中有相当多的演示代码显式地与这些jQuery插件配合使用。这并不是坏事，但是似乎用Backbone结构编写类似的功能会更易于维护，或者至少易于理解它正在做什么。请注意，在我的旅行中，我发现了backbone tablesorter（出链接）还不能确定它是否会导致更紧密耦合的代码。

谢谢！

- Idealien

---

如果我的答案有任何可以改进的地方，请在下面评论，否则，如果它对您有帮助，您可以点击“接受”。这让其他用户知道答案是您正在寻找的，并帮助其他遇到相同问题的用户找到正确的解决方案。 - Hzmy

Answer 1

路由器

当然它们可以用于重型工作 - 我相信你以前听过这个说法，但是Backbone只提供了最基本的框架供你选择在其之上构建。

我会将SummaryResultsView设置为Workspace路由器上的变量。否则，每次调用Workspace.summary()时，都会有幽灵视图挂在周围。

我不确定你在使用track.Router.navigate做什么，因为它看起来与你在Workspace路由器中定义的#search具有相同的路由，这将导致两个路由被调用。

您可以创建多个路由器来帮助您在应用程序的不同部分之间划分代码。从主路由器开始并拥有子路由器通常是我的目标。

主页面视图

同样，有些人喜欢这样做，而其他人则喜欢从路由器开始。如果您发现自己有一个庞大的主视图，请尝试将其拆分成较小的视图，以避免重复。

缓存视图可能很有用 - 因此，在仅在应用程序启动时创建一次的主视图上，您可以执行以下操作：

var MyView = Backbone.View.extend({
    childView: null,

    toggleChildView: function() {
        if (this.childView) {
          this.childView.toggle(); //Toggle show/hide
        } else {
          this.childView = new ChildView({model: someModel});
        }
    }
});

Underscore模板

我发现使用require.js对我学习很有帮助。当应用程序开始增长时，它确实有所帮助 - 如果您不知道，有一个TodoMVC应用的require.js实现。

如果没有使用require.js（text插件），您将无法使用外部模板，因为它使用AJAX调用来获取模板文件。当然，除非您设计自己的AJAX调用以拉入模板文件，但这似乎是一种比较冗长的方法。

模板文件是静态的 - 我不完全理解您如何从单独的CMS中提取模板文件？

顺便说一句 - 如果您使用 require.js优化，它会将模板内联，因此它们包含在一个大的JS文件中。

移植代码

如果您找到一个与jQuery插件（我有一个jQuery UI日期选择器）兼容的非常通用的Backbone模型，您可以轻松地在应用程序之间进行移植，而不会引起太多麻烦。如果使用require.js，这将加速它，因为它已经在一个单独的文件中了（复制和粘贴简直太方便了）。

希望这有所帮助！

- Hzmy