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

【问题标题】：Backbone.js - Routers, view rendering and general conceptualizationsBackbone.js - 路由器、视图渲染和一般概念化
【发布时间】：2013-03-08 22:32:17
【问题描述】：

我已经阅读了相当多的入门教程（包括 Absolute Beginners，Learn it Completely，以及 2 个 Code School Backbone 课程的大部分内容），我完全可以看到 Backbone 提供的潜力。但是理解的灯泡还没有完全打开......我认为绝大多数简单的待办事项应用程序的例子使它看起来比在处理更复杂的项目时要简单得多。

我的实验已经进行到一定程度 - 但我认为现在获得有关以下一系列零散问题的答案或反馈可能会为我节省很多挫败感，并使我在学习曲线上向我想要的方向前进。我已尝试将相关的 sn-ps 包含在内，以获取具有详细性质的示例。

1) 路由器很棒，但是/不适合做繁重的工作吗？

以下路由器用于将用户从初始页面加载移动到特定路径（搜索），该路径在最后一个加载的 js 中实例化 SearchBoxView，类似于 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 的外部文件中的下划线模板

我很确定我最终会包含 require.js - 但为了简化学习曲线的一部分，我想在没有它的情况下开始。同样 b/c 模板将从单独的 CMS 中提取字段标题，并且（还）不确定它与 AMD 的配合会有多好。

4) 它可以帮助减少插件依赖，如颜色框和数据表吗？

我正在使用 Backbone 进行的概念验证项目之一是一个中等大小的应用程序，它具有相当多的显式编写的演示代码以与这些 jQuery 插件一起使用。这不是坏话，但似乎在骨干结构中编写类似的功能会更易于维护或至少易于理解它在做什么。请注意，我在旅行中发现了主干表排序器（帖子链接外），但（还）无法确定它是否会导致任何或多或少紧密耦合的代码 w.r.t 插件。

谢谢！

【问题讨论】：

如果我的回答有什么可以改进的地方，请在下方评论，如果对你有帮助，可以点击Accept。这可以让其他用户知道答案就是您要寻找的答案，并帮助遇到相同问题的其他用户找到正确的解决方案。

标签： backbone.js

【解决方案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});
        }
    }
});

下划线模板

我实际上发现使用 require.js 帮助我学习。当应用程序开始变大时，它肯定会有所帮助——TodoMVC 应用程序有一个 require.js 实现——如果你还不知道的话。

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

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

只是附带说明 - 如果您使用 require.js optimization，它实际上会嵌入您的模板，以便将它们包含在一个胖 JS 文件中。

移植代码

如果你找到了一个非常通用的 Backbone 模型，它可以与 jQuery 插件一起使用（我有一个用于 jQuery UI 日期选择器的模型），你可以很容易地在应用程序之间移植它，而无需大惊小怪。如果在单独的文件中使用 require.js（复制并粘贴 FTW），则会加快速度。

希望这会有所帮助！

【讨论】：