5

我已经阅读了相当多的介绍性教程阅读（包括绝对初学者、完全学习，以及 2 个 Code School Backbone 课程的大部分内容），我完全可以看到 Backbone 提供的潜力。但是理解的灯泡还没有完全打开......我认为绝大多数简单的待办事项应用程序的例子使它看起来比在处理更复杂的项目时更微不足道。

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

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 插件一起使用。这不是坏话，但似乎在骨干结构中编写类似的功能会更易于维护或至少易于理解它在做什么。请注意，我在旅行中发现了主干表排序器（帖子链接外），并且（还）无法判断它是否会导致或多或少紧密耦合的代码 wrt 插件。

谢谢！

4

1 回答 1

5

路由器

当然它们可以用于繁重的工作——我相信你以前听说过，但是 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），这会加快速度。

希望这可以帮助！

于 2013-03-08T22:59:11.500 回答