我正在尝试使用 Marionette 来掌握 Backbone 和 Require 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;
});
仪表板.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;
});
最佳答案
我想我已经弄清楚了,即使我不是 100% 确定原因。
问题在于您的 Router
定义。将 View 与对 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;
});
我不确定是否有更好的解决方案可以让您的 View 在路由器中定义,无论如何,这有效并且会让您的路由器更轻,特别是当您的 View 数量增加时...
关于backbone.js - Backbone JS、Marionette 和 Require JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13887790/