2

私はBackboneを理解し、その優れた機能のいくつかにマリオネットを使用してJSを要求しようとしています。ただし、アプリをビューで利用できるという問題がいくつか見つかりました。

main.js

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

application.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;
});

コンソールログで未定義を受信して​​いますか？アプリケーションは代わりにrequirejsモジュールを使用する必要がありますか？

編集：requireで更新

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;

});
4

3 に答える 3

2

理由が 100% わからなくても、わかったと思います。

問題はあなたのRouter定義にあります。への参照を含むビューを配置すると、main.js で呼び出されるApplication前にルーターが開始されます。app.start()実際console.log(app)、main.js に a を入れると、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;

});

ルーターでビューを定義したままにするより良い解決策があるかどうかはわかりませんが、とにかくこれは機能し、特にビューの数が増えた場合にルーターを軽量化します...

于 2012-12-16T12:54:07.497 に答える
0

通常、Require.js モジュールを本来undefinedあるべきでないときに に設定している場合、それは循環依存が原因であることがわかりました。たとえば、「ベント」が「ダッシュボード」に依存しているとしましょう。あなたが持っているだろう:ventニーズdashboardニーズapplicationニーズvent...

これが発生した場合、Require の応答は基本的にファイルの 1 つを選択して機能させるだけですが、循環依存関係に関係する他のファイルはundefined.

インポートを削除することでこの理論をテストして、undefined. あるいは、Require の人々は xrayquire と呼ばれるダウンロード可能なツールを持っています。これは、循環依存関係を見つけるのに役立ちます。

于 2012-12-14T23:55:37.840 に答える
0

app.router 経由でルーターにアクセスする必要がありますか? ダッシュボード自体にルーターが必要で、直接アクセスすることはできませんか? アプリケーションがすでに実行されている限り (その時点で実行されているはずです)、アプリ経由でアクセスする必要はありません。あなたの問題は間違いなく複雑な循環依存関係だと思います。

于 2013-07-05T17:21:10.293 に答える