Xác định Không gian tên ứng dụng toàn cầu với Require.js và Backbone

Question

Tôi mới sử dụng Require.js và tôi đang cố gắng thực hiện điều gì đó mà tôi cho là đơn giản nhưng bắt đầu là một nỗi đau.

Tôi đang cố gắng xác định không gian tên chung cho ứng dụng Backbone của tôi và tải nó dưới dạng mô-đun. Đây là không gian tên của tôi (main.js):

define(
['jquery', 
    'underscore', 
    'backbone', 
    'GlobalRouter' 
], 
function($, _, Backbone) { 
var App= { 
    Models: {}, 
    Views: {}, 
    Collections: {}, 
    Routers: {}, 
    init: function() { 
     new App.Routers.GlobalRouter(); 
     Backbone.history.start(); 
    } 
} 
return App; 

}); 

và đây là config.js tập tin của tôi:

require.config({ 
// your configuration key/values here 
baseUrl: "js", // generally the same directory as the script used in a data-main attribute for the top level script 
paths: { 
    'jquery' : '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min', 
    'underscore': 'vendor/underscore-min', 
    'backbone': 'vendor/backbone-min', 
    'marionette': 'vendor/backbone.marionette', 
    'main' : 'main' 
}, // set up custom paths to libraries, or paths to RequireJS plugins 
shim: { 
    'underscore': { 
     exports: '_' 
    }, 

    'backbone': { 
     deps: ['underscore', 'jquery'], 
     exports: 'Backbone' 
    }, 

    'main' : { 
     deps: ['underscore', 'jquery', 'backbone', 'GlobalRouter'], 
     exports: 'TEWC' 
    } 

} // used for setting up all Shims (see below for more detail) 
}); 

define([ 
'jquery', 
    'underscore', 
    'backbone', 
    'main' 
], 
function($, _, Backbone, App, GlobalRouter) { 
console.log(App) 
alert('hit ') 
    $(function() { 
     App.init(); 
    }); 
} 

);

và cho biện pháp tốt, đây là bộ định tuyến của tôi:

define([ 
'jquery', 
'underscore', 
'backbone', 
'main' 
], 
function($, _, Backbone, TEWC) { 

TEWC.Routers.GlobalRouter = Backbone.Router.extend({ 
    routes: { 
     "" : "index", 
     "documents/:id" : "edit", 
     "login" : "login" 
    }, 

    edit: function(id) { 
     alert('edit') 
    }, 

    index: function() { 
     alert('index') 
    }, 

    login: function() { 
     alert('login') 
    } 
}); 

}); 

Trong quá khứ, tôi đã nhận được một 'ứng dụng là lỗi không xác định'. Bây giờ, tôi nhận được một lỗi thời gian chờ tải sau một vài phút mà nói này:

Uncaught Error: Load timeout for modules: main 

Tuy nhiên, cảnh báo không cháy, và main.js dường như không có được nạp, nhưng tôi tin rằng bộ định tuyến không, và nó không bark rằng TEWC là không xác định - vì vậy nó có thể được tải mặc dù nó không có trong tab mạng của tôi?

Đây có lẽ là câu hỏi tân binh - có ai có bất kỳ thông tin chi tiết nào về điều này không?

Answer 1

Các mã sau đây không xác định GlobalRouter nhưng nó có được của truyền cho các định nghĩa callback

define([ 
'jquery', 
    'underscore', 
    'backbone', 
    'main' 
], 
function($, _, Backbone, App, GlobalRouter) { 
console.log(App) 
alert('hit ') 
    $(function() { 
     App.init(); 
    }); 
} 

thêm GlobalRouter-define

Thứ hai, khi nó không tải main ..can bạn kiểm tra từ giao diện điều khiển những gì URL mà nó đang cố gắng truy cập? Nó có lẽ là một cấu hình sai.

Answer 2

Nếu tôi không nhầm lẫn vấn đề của bạn là trong config.js, sau require.config(), define() của bạn phải là require() thay thế.

Giải thích thêm. Bạn hiện có:

define([ 
'jquery', 
    'underscore', 
    'backbone', 
    'main' 
... 

define này phải là một require vì đây là mã bạn muốn thực hiện; nó không phải là định nghĩa mô-đun.

Điều này và dĩ nhiên thiếu phụ thuộc GlobalRouter như đã nêu trước đó.