Question

我已经完成了一些介绍性的教程阅读（包括Absolute Beginners，Learn it Completely以及2个Code School Backbone课程的大部分内容），我完全可以看到Backbone提供的潜力。但理解灯泡还没有完全开启......我认为绝大多数例子都是简单的todo应用程序，这使得它看起来比处理更复杂的项目时更加微不足道。

我的实验已经达到了一定程度 - 但我认为现在得到关于以下一系列散射问题的答案或反馈可能会让我失去很多挫折感，并将我的学习曲线推向我想去的地方。我试图将相关的代码片段包含在具有详细性质的示例中。

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

我 JUST 找到了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）它可以帮助减少插件依赖关系，如colorbox和datatables吗？

我正在努力使用Backbone的概念项目的证明之一是一个大小适中的应用程序，它具有明确编写的用于使用这些jQuery插件的大量演示代码。这不是坏事，但似乎在骨干结构中编写类似功能似乎更易于维护或至少清晰易懂，无法理解它在做什么。请注意，我在旅途中发现了骨干乒乓球（在帖子的链接之外）并且不能（还）告诉它是否会导致w.r.t插件中的任何或多或少紧密耦合的代码。

谢谢！

Answer 1

路由器

当然它们可以用于繁重的工作 - 我相信你之前已经听过它了，但是Backbone只是提供了根据你的选择建立在上面的裸机。

我会将SummaryResultsView设置为Workspace路由器上的变量。否则，无论何时拨打Workspace.summary()，您都会看到鬼视图。

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

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

主页面视图

同样，有些人喜欢这样做，而其他人则喜欢从路由器中解脱出来。如果您发现有一个巨大的主视图，请尝试将其拆分为较小的视图，以便您不要重复自己。

缓存视图非常有用 - 所以在主视图上只创建一次（在应用程序启动时），你可以这样做：

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），这会加速。

希望这有帮助！

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

1 个答案:

路由器

主页面视图

下划线模板

移植代码