骨干网设计

Question

我刚刚开始使用 Backbone。我浏览了前两个 PeepCode 截屏视频，非常棒，现在我正在研究未来应用程序的快速分离（无服务器端）模型。

这就是我想要构建的（大致）。一系列五个文本框 - 让我们称之为小部件。每个小部件输入在选择时将显示一个窗格，其中显示与小部件关联的任务，并允许用户创建新任务或销毁现有任务。

此时，我认为我有以下模型：

Widget
Task

以下集合：

Tasks
Widgets

以下视图（这就是它变得毛茸茸的地方！）

WidgetListView
  - Presents a collection of Widgets
WidgetView 
  - sub-view of WidgetListView to render a specific Widget
TaskPaneView 
  - Presented when the user selects a Widget input
TaskCreateView 
  - Ability to create a new Task associated with selected Widget
TaskListView 
  - Presents a collection of Tasks for the given widget
TaskView 
  - Displays Task detail - sub-view of TaskListView

假设这是合理的，技巧就变成了如何在选择 WidgetView 时显示 TaskPaneView。此外，TaskPaneView 应如何依次呈现 TaskCreateViews 和 TaskListViews。

这里真正的问题是：一个级联渲染事件是否跨视图？根视图是否允许知道子视图并显式渲染它们？这应该是事件驱动的吗？

如果这是一个开放式问题，我深表歉意，只是希望有人以前见过类似的东西并能够为我指明正确的方向。

谢谢！

Answer 1

绝对使其成为事件驱动的。另外，尽量不要创建紧密耦合的视图。松耦合将使您的代码更易于维护且灵活。

查看这篇关于事件聚合器模型和主干的文章：

http://lostechies.com/derickbailey/2011/07/19/references-routing-and-the-event-aggregator-coordinating-views-in-backbone-js/

rel 版本是你可以这样做：

var vent = _.extend({}, Backbone.Events);

并使用 vent.trigger 和 vent.bind 来控制你的应用程序。

Answer 2

前言：我已经用下面编写的代码为您提供了要点：
https://gist.github.com/2863979

我同意 pub/sub （“观察者模式” ）这是其他答案所建议的。不过，我也会使用 Require.js 和 Backbone 的强大功能。

阿迪·奥斯马尼 (Addy Osmani) 写了一些很棒的文章！有关 Javascript 设计模式和构建 Backbone 应用程序的资源：

http://addyosmani.com/resources/essentialjsdesignpatterns/book /
http://addyosmani.com/writing-modular-js/
http://addyosmani.github.com/backbone-fundamentals/

使用 AMD 的酷炫之处（在 Require.js 中实现）与 Backbone 一起解决了一些通常会遇到的问题。

通常，您将定义类并以某种命名空间的方式存储它们，例如：

MyApp.controllers.Tasks = Backbone.Controller.extend({})

这很好，只要您在一个文件中定义大部分内容，当您开始向混合中添加越来越多的不同文件时，它就会变得不那么健壮，您必须开始注意如何加载不同的文件，controllers\Tasks.js 之后 models\Task.js 等。您当然可以正确编译所有文件订单等，但还远非完美。

最重要的是，非 AMD 方式的问题是您必须将视图彼此更紧密地嵌套在一起。可以说：

MyApp.classes.views.TaskList = Backbone.View.extend({ 
    // do stuff
});

MyApp.views.App = Backbone.View.extend({
    el: '#app',
    initialize: function(){
        _.bindAll(this, 'render');
        this.task_list = new MyApp.classes.views.TaskList();    
    },

    render: function(){
        this.task_list.render();
    }
});

window.app = new MyApp.views.App();

一切都很好，但这可能会成为一场噩梦。

使用 AMD，您可以定义一个模块并给它一些依赖项，如果您对其工作原理感兴趣，请阅读上面的链接，但上面的示例将如下所示：

// file: views/TaskList.js
define([], function(){

    var TaskList = Backbone.View.extend({
        //do stuff
    });

    return new TaskList();
});

// file: views/App.js
define(['views/TaskList'], function(TaskListView){

    var App = Backbone.View.extend({
        el: '#app',

        initialize: function(){
            _.bindAll(this, 'render');
        },

        render: function(){
            TaskListView.render();
        }
    });

    return new App();
});

// called in index.html
Require(['views/App'], function(AppView){
    window.app = AppView;
});

请注意，在您返回实例的视图的情况下，我也对集合执行此操作，但对于模型，我会返回类：

// file: models/Task.js
define([], function(){

    var Task = Backbone.Model.extend({
        //do stuff
    });

    return Task;
});

一开始这可能看起来有点多，人们可能会认为“哇，这太过分了”。但是，当您必须在许多不同的模块（例如集合）中使用相同的对象时，真正的力量就会变得清晰：

// file: models/Task.js
define([], function(){

    var Task = Backbone.Model.extend({
        //do stuff
    });

    return Task;
});

// file: collections/Tasks.js
define(['models/Task'], function(TaskModel){

    var Tasks = Backbone.Collection.extend({
        model: TaskModel
    });

    return new Tasks();
});

// file: views/TaskList.js
define(['collections/Tasks'], function(Tasks){

    var TaskList = Backbone.View.extend({
        render: function(){
            _.each(Tasks.models, function(task, index){
                // do something with each task
            });
        }
    });

    return new TaskList();
});


// file: views/statistics.js
define(['collections/Tasks'], function(Tasks){

    var TaskStats = Backbone.View.extend({
        el: document.createElement('div'),

        // Note that you'd have this function in your collection normally (demo)
        getStats: function(){
            totals = {
                all: Tasks.models.length
                done: _.filter(Tasks, function(task){ return task.get('done'); });
            };

            return totals;
        },

        render: function(){
            var stats = this.getStats();

            // do something in a view with the stats.
        }
    });

    return new TaskStats();
});

请注意，“任务”对象在两个视图中完全相同，因此具有相同的模型、状态等。比必须在某一时刻创建 Tasks 集合的实例然后在整个应用程序中始终引用它要好得多。

至少对我来说，将 Require.js 与 Backbone 一起使用已经消除了在哪里实例化什么的巨大困惑。为此使用模块非常有帮助。我希望这也适用于你的问题。

ps 另请注意，您也可以将 Backbone、Underscore 和 jQuery 作为模块包含到您的应用程序中，尽管您不是必须这样做，但您可以使用普通的脚本标签加载它们。

Answer 3

对于这种复杂性的东西，我可能建议使用 Backbone Aura，它还没有稳定的发行版本。 Aura 本质上允许您拥有多个完全独立的 Backbone 应用程序（称为“小部件”），在单个页面上运行，这可能有助于理清和平滑某些模型/视图逻辑。

Answer 4

从经典的 MVC 角度来看，您的视图响应其关联模型的变化。

//initialize for view
initialize : function() {
    this.model.on("change", this.render(), this);
}

这里的想法是，每当视图的模型发生更改时，它就会自行渲染。

或者或另外，如果您更改视图上的某些内容，则可以触发控制器侦听的事件。如果控制器还创建了其他模型，它可以以某种有意义的方式修改它们，那么如果您正在侦听模型的更改，视图也会更改。

Answer 5

与克里斯·比斯卡迪的答案类似。这就是我所拥有的：

您创建一个全局 var Dispatcher（不必是全局的，只要可以从 Backbone 应用程序的范围访问即可）：

Dispatcher = _.extend({}, Backbone.Events);

Dispatcher 将帮助您执行订阅的回调，其中事件不是由更改特别触发的在模型或集合中。很酷的是，Dispatcher 可以执行 Backbone 应用程序内部或外部的任何功能。

您可以在视图或应用程序的任何部分中使用bind()订阅事件：

Dispatcher.bind('editor_keypress', this.validate_summary);

然后在另一个视图或应用程序的部分中使用trigger()触发新事件：

Dispatcher.trigger('redactor_keypress');

使用调度程序的美妙之处在于它的简单性和订阅多个事件的能力同一事件的侦听器（例如，不同 Backbone 视图中的回调）。