1

我正在寻找使用和引导我的网络应用程序Backbone.Marionette的最佳方式。 以下实现有效，但我想知道这是否是正确的方法。Backbone.RouterRequirejs

这是我的一些代码（*）。

我的问题是：
1）以下数据流（index.html-> conf.js-> router.js-> app.js）是否正确？
2）Backbone.View对于每个区域（header，sidebar.....）应该根据上下文在router.js或app.js或展位中实例化？

// index.html
<!doctype html>
<html lang="en">
    <head>
        <!-- Load the script "/js/conf.js" as our entry point -->
        <script data-main="js/conf" src="js/vendor/require.js"></script>
     </head>
     <body>
     </body>


// js/config.js
require.config({
    // some code
});
require(['app']);  // instead of  require(['conf']); 

// router.js
define([
    'app',
    // others modules
],
function(App, $, _, Backbone, Marionette){
    "use strict";
    var AppRouter = Backbone.Marionette.AppRouter.extend({
        routes: {
            test: test,
            "*defaults": "home"
        }

    var initialize = function ()
    {
        var app_router = new AppRouter;
    };

    return {
        initialize: initialize
    };
});

// js/app.js
define(
[
    // some modules
],
function ($, _, Backbone, Router, Mustache, Layout, SidebarView) {
    var MyApp = new Backbone.Marionette.Application();

    MyApp.addInitializer(function () {
        $('body').html(Layout);
        MyApp.addRegions({
            header: '#header',
            sidebar: '#sidebar',
            mainColumn: '#main-column',
            rightColumn: '#right-column'
        });
    });

    MyApp.addInitializer(function () {
        var sidebarView = new SidebarView();
        MyApp.sidebar.show(sidebarView);
    });

    MyApp.on("initialize:after", function () {
//        Router.initialize();
    });

    MyApp.start();

    return MyApp;

});
4

1 回答 1

3

这看起来总体上还不错。我可能会改变一些事情，但这些主要是个人喜好：

1）反转router和app文件的关系，使用初始化器来启动router。

现在，您在路由器和应用程序文件之间存在循环依赖关系，这绝不是一件好事。尽管 RequireJS 可以很好地处理这个问题，但在许多其他方面这都是一个坏主意，因为它可能导致代码无法按您期望的方式工作。

2) 在你的路由器文件中，设置一个初始化路由器的初始化器。

3）不要从路由器文件中启动backbone.history。

在一个项目中拥有多个路由器是很常见的，并且建议这样做。但是你只能调用Backbone.History.start()一次。使用路由器的“after:initialize”事件在 app.js 文件中启动它

MyApp.on("after:initialize", function(){ Backbone.History.start(); }

4) 将初始化程序回调提取到从单个初始化程序调用的函数中

虽然使用多个初始化器在技术上没有任何问题 - 而且您将需要跨多个模块的多个初始化器 - 我建议在单个模块中使用单个初始化器，并让一个初始化器调用模块中定义的其他函数。

addRegions5)在初始化器之外调用

无法保证您的初始化程序将按照您添加它们的顺序运行。这取决于各个浏览器如何处理事情。

例如，您的 app.js 文件可能如下所示：


// js/app.js
define(
[
    // some modules
],
function ($, _, Backbone, Router, Mustache, Layout, SidebarView) {
    var MyApp = new Backbone.Marionette.Application();

    MyApp.addRegions({
        header: '#header',
        sidebar: '#sidebar',
        mainColumn: '#main-column',
        rightColumn: '#right-column'
    });

    MyApp.addInitializer(function(){
       showLayout();
       initSidebar();
    });

    MyApp.on("initialize:after", function(){
      Backbone.History.start();
    });

    function initSidebar() {
        var sidebarView = new SidebarView();
        MyApp.sidebar.show(sidebarView);
    }

    function showLayout() {
        $('body').html(Layout);
    }

    MyApp.start();

    return MyApp;

});

...

好吧，这看起来比我最初想象的要多得多。:) 但就像我说的，你的设置总体上看起来不错。这些是我会做的事情，但不一定是使您的应用程序工作的必要条件。

于 2012-06-14T12:58:51.373 回答