Backbone JS、Marionette 和 Require JS答案

【问题标题】：Backbone JS, Marionette and Require JSBackbone JS、Marionette 和 Require JS
【发布时间】：2012-12-02 23:48:57
【问题描述】：

我正在尝试使用木偶来掌握 Backbone 和 Require JS 的一些出色功能。但是，我发现该应用程序可用于视图的一些问题：

main.js

require(['application'], function(app){
app.start();
});

应用程序.js

define([
'marionette',
'router'
], function(marionette, Router){

"use strict";

var app = new marionette.Application();

app.addRegions({
    header : 'header',
    main   : '#main'
});

app.addInitializer(function(){
    this.router = new Router();
});

return app;

});

dashboard.js

define([
'application',
'underscore',
'backbone', 
], function(app, _, Backbone) {
var DashboardView = Backbone.View.extend({

initialize: function() {
    console.log(app);
    $('a').click(function(e){
        e.preventDefault();
        app.router.navigate("claims", {
           trigger: true 
        });
    });
},

});
return DashboardView;
});

我在控制台日志中收到 undefined？应用程序是否应该使用 requirejs 模块？

编辑：使用要求更新

require.config({

paths: {
    'jquery'        : '../vendors/jquery-1.8.2',
    'underscore'    : '../vendors/underscore',
    'text'          : '../vendors/text',
    'json2'         : '../vendors/json2',
    'backbone'      : '../vendors/backbone',
    'marionette'    : '../vendors/plugins/backbone.marionette',
    'paginator'     : '../vendors/plugins/backbone.paginator',
    'relational'    : '../vendors/plugins/backbone.relational',
    'moment'        : '../vendors/moment',
    'bootstrap'     : '../vendors/bootstrap',
    'datepicker'    : '../vendors/plugins/bootstrap.datepicker',
    'templates'     : 'templates/'
},

shim: {

    backbone: {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    },
    marionette : {
        exports : 'Backbone.Marionette',
        deps : ['backbone']
    },
    paginator: {
        deps: [
        'backbone',
        'underscore',
        'jquery'
        ],
        exports: 'Backbone.Paginator'
    },
    relational: ['backbone'],
    underscore: {
        'exports': '_'
    },
    bootstrap: {
        deps: ['jquery'],
        exports: "bootstrap"
    },
    datepicker: {
        deps: ['jquery','bootstrap'],
        exports: "datepicker"
    },
    moment: {
        exports: 'moment'
    }
}

});

require(['application'], function(app){
    app.start();
});

路由器

define([
  'views/claims/PaginatedList',
  'views/dashboard/Dashboard'
  ], function(PaginatedClaimListView, DashboardView){

var Router = Backbone.Router.extend({

    routes: {

        "": "index",
        "claims": "claims"

    },

    initialize: function(){
        Backbone.history.start({
            pushState: true,
            root: '/app_dev.php/hera'
        });
    },

    index: function(){
        var dashboard = new DashboardView();
    },

    claims: function(){
        var claimListView = new PaginatedClaimListView();
    }

});

return Router;

});

【问题讨论】：

你是如何配置 require.js 的？你能报告你的 shim 和路径配置吗？
@Ingro 我已经在我原来的问题中添加了这个，谢谢。
好吧，我没有看到任何奇怪的东西，我使用的是类似的设置（我只是不代理木偶，而是在需要时使用完整的语法，比如'new Backbone.Marionette.Application ()') 一切正常。你是怎么调用dashboard.js的？它是在您的主要功能中定义的应用程序吗？ “通风口”里面有什么？
我删除了通风口并添加了路由器，因此您可以看到仪表板是如何被调用的。应用程序在 main.js 的底部定义，我已更新，因此更清晰。（需要js的底部）

标签： backbone.js requirejs marionette

【解决方案1】：

我想我已经弄明白了，即使我不是 100% 确定原因。

问题在于您的Router 定义。将您的视图与Application 的引用一起放在那里会使路由器在main.js 中调用app.start() 之前启动。事实上，如果你在 main.js 中添加一个console.log(app)，你会注意到它在dashboard.js 中的那个之后被调用。

以下是我的解决方法：

define(['backbone'], function(Backbone){

var Router = Backbone.Router.extend({

    routes: {
        "": "index",
        "claims": "claims"
    },

    initialize: function(){
        Backbone.history.start({
            pushState: true,
            root: '/app_dev.php/hera'
        });
    },

    index: function(){
        require(['views/dashboard/Dashboard'],function(DashboardView){
            var dashboard = new DashboardView();
        });
    },

    claims: function(){
        require(['views/claims/PaginatedList'],function(PaginatedClaimListView){
             var claimListView = new PaginatedClaimListView();
        });
    }

});

return Router;

});

我不确定是否有更好的解决方案可以将您的视图定义在路由器中，无论如何这可行并且会使您的路由器更轻，特别是如果您的视图数量增加...

【讨论】：

感谢您所做的更改，现在一切正常。你对它更轻的看法也是对的，即使不需要它们，我也不认为它们是必需的。我想我明白为什么会发生这种情况，感谢您的帮助！

【解决方案2】：

我发现，通常每当我将 Require.js 模块设置为 undefined 时，它们不应该设置为，这是因为循环依赖。例如，假设“vent”依赖于“dashboard”；你会有：vent需要dashboard需要application需要vent...

当这种情况发生时，Require 的响应基本上只是选择其中一个文件并使其工作，但循环依赖中涉及的任何其他文件都以 undefined 出现。

您可以通过删除导入来测试这个理论，看看这是否修复了您的undefined。或者，Require 人员可以下载一个名为 xrayquire 的工具，该工具有助于查找循环依赖项。

【讨论】：

感谢您的回复，我删除了除应用程序之外的所有内容，但我仍然收到未定义的消息，所以回到第一格。

【解决方案3】：

是否必须通过 app.router 访问路由器？你能不能让仪表板自己需要路由器，并直接访问它？只要应用程序已经执行（此时它应该已经执行），那么您就不需要通过 app.我认为你的问题绝对是一个复杂的循环依赖。

【讨论】：