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

我已经做了相当多的入门教程阅读（包括绝对初学者和2代码学校主干课程的大部分），我完全可以看到主干课程提供的潜力。但是理解的灯泡还没有完全打开……我认为绝大多数简单的todo应用程序的例子使它看起来比在更复杂的项目上工作时实际要琐碎得多

我的实验在一定程度上还行，但我认为现在就获得以下一系列杂乱无章的问题的答案或反馈可能会让我省去很多挫折感，并让我朝着我想要的方向前进。我已经尝试过为详细的示例包含相关的代码片段

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")});
    },

我刚刚发现，路由器的初始化行为似乎与我预期的类似。我们下一步将尝试这种方法

2） 您是否需要在呈现中创建大量状态逻辑的主页视图？

我对上面路由器的目标是，每个路由都有许多视图，可以根据集合中的结果显示/隐藏或更改它们的表示。设置要呈现的状态更改视图似乎是一个好地方。TodoMVC示例中的app.js view render函数执行许多等效逻辑

3） 在没有require.js的外部文件中下划线模板

我很确定我最终会加入require.js，但为了简化学习过程的一部分，我想从没有require.js开始。此外，b/c模板将从一个单独的CMS中提取字段标题，但还不确定它与AMD的配合有多好

4） 它能帮助减少像colorbox和datatables这样的插件依赖性吗？

我正在使用主干网开发的一个概念验证项目是一个中等大小的应用程序，它有大量显式编写的表示代码用于这些jQuery插件。这对persay来说还不错，但在主干结构中编写类似的功能似乎更易于维护，或者至少更容易理解它在做什么。请注意，我在旅行中发现了主干表排序器（没有post链接），但我还不能（现在）判断它是否会产生或多或少紧密耦合的代码w.r.t插件

谢谢

路由器 当然，它们可以用于重物搬运——我相信你们以前听过，但脊骨只是提供了裸骨，可以根据你们的选择建造在上面

我将

SummaryResultsView

设置为

Workspace

路由器上的一个变量。否则，无论何时调用

Workspace.summary（）

都会出现重影视图

我不确定您正在使用

track.Router.navigate

做什么，因为它与

工作区中定义的
路由器共享相同的路径
#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});
        }
    }
});

下划线模板
事实上，我发现使用require.js帮助我学习。如果您还不知道，当应用程序的大小开始增长时，它当然会有所帮助—TodoMVC应用程序有一个require.js实现

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

模板文件是静态的-我不完全理解你说的从一个单独的CMS中提取是什么意思

仅作为一个旁注-如果您在模板中实际使用it，那么它们将包含在一个fat JS文件中

移植代码
如果您找到了一个与jQuery插件一起工作的非常通用的主干模型（我有一个用于jQuery UI日期选择器的主干模型），您可以非常轻松地在应用程序之间进行移植，而无需太多麻烦。如果将require.js用作单独文件（复制并粘贴FTW）中的文件，则速度会加快

希望这有帮助
 如果对我的答案有任何改进，请在下面进行评论，否则，如果有帮助，您可以单击
Accept
。这可以让其他用户知道答案就是您所寻找的，并帮助其他有相同问题的用户确定正确的解决方案。