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

Question

我已经做了介绍性教程阅读(包括绝对初学者,公平一点了解它彻底,和的2门代码学校骨干课程大部分地区),我完全可以看出,骨干提供了可能.但理解灯泡还没有完全开启......我认为绝大多数的例子都是简单的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")});
    },

我刚刚发现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插件.这不是坏事,但似乎在骨干结构中编写类似功能似乎更易于维护或至少清晰易懂,无法理解它在做什么.请注意,我在旅行中找到了骨干乒乓球(用于发布链接)并且不能(还)告诉它是否会导致任何或多或少紧密耦合的代码插件.

谢谢!

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优化,它实际上会对您的模板进行内联,以便它们包含在一个胖JS文件中.

移植代码

如果你找到一个非常通用的Backbone模型,可以使用jQuery插件(我有一个用于jQuery UI日期选择器),你可以很容易地在应用程序之间移植它而不用太大惊小怪.如果使用require.js已经在一个单独的文件中(复制并粘贴FTW),这会加快速度.

希望这可以帮助!