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


Backbone.js - Routers, view rendering and general conceptualizations

我已经做了相当一部分入门教程阅读(包括"绝对初学者"，"完全学习"以及2 Code School Backbone课程的大部分内容)，我完全可以看到Backbone提供的潜力。但是理解灯泡还没有完全打开...我认为绝大多数示例都是简单的待办应用程序，这使得它在处理更复杂的项目时显得比实际要琐碎得多。

我的实验已经进行到一定程度了-但我认为现在获得有关以下一系列分散问题的答案或反馈可能会节省很多挫败感，并使我朝着自己想要的方向前进。我已尝试为相关示例提供详细的示例。

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

以下路由器可将用户从初始页面加载移动到特定路由(搜索)，该路由的SearchBoxView在上一次加载的js中实例化，类似于TodoMVC示例中的app.js。但是，尝试像在SummaryResultsView所示的那样在路由器中设置视图会生成"不是构造函数"错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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)它可以帮助减少诸如colorbox和datatables之类的插件依赖吗？

我正在使用Backbone进行概念验证的项目之一是中型应用程序，该应用程序具有大量明确编写的演示代码以与这些jQuery插件一起使用。说来还不错，但似乎在主干结构中编写类似的功能似乎更易于维护，或者至少易读，以了解其功能。请注意，我在旅行中发现了Backbone 表排序器(在发布链接之外)，并且(还不能)说出它是否会导致或多或少紧密耦合代码的w.r.t插件。

谢谢！

相关讨论

路由器

当然可以将它们用于繁重的工作-我敢肯定您以前听过，但是Backbone只是提供了您所选择的基础之上构建的准系统。

我将SummaryResultsView设置为Workspace路由器上的变量。否则，每当您调用Workspace.summary()时，都将出现鬼视图。

我不确定您对track.Router.navigate的处理方式，因为它看起来与Workspace路由器中定义的路由共享相同的路由#search，这将导致两条路由都被调用。

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

主页浏览量

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

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

1
2
3
4
5
6
7
8
9
10
11
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优化，它将实际上内联您的模板，因此它们包含在一个胖JS文件中。

移植代码

如果您发现一个可以与jQuery插件一起使用的非常通用的Backbone模型(我为jQuery UI日期选择器提供了一个模型)，则可以轻松地在应用程序之间移植它而不必大惊小怪。如果已经在单独的文件中使用了require.js(复制并粘贴FTW)，则会??加快处理速度。

希望这会有所帮助！