Backbone.js 主干JS、木偶和需要JS
我正在努力掌握主干网,并要求JS使用木偶网来实现它的一些优秀特性。但是,我发现该应用程序在可供浏览方面存在一些问题: main.jsBackbone.js 主干JS、木偶和需要JS,backbone.js,requirejs,marionette,Backbone.js,Requirejs,Marionette,我正在努力掌握主干网,并要求JS使用木偶网来实现它的一些优秀特性。但是,我发现该应用程序在可供浏览方面存在一些问题: main.js require(['application'], function(app){ app.start(); }); application.js define([ 'marionette', 'router' ], function(marionette, Router){ "use strict"; var app = new marionette.Appl
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;
});
我发现,通常每当我将Require.js模块设置为
未定义时(当它们不应该被设置时),都是因为循环依赖关系。例如,假设“通风口”依赖于“仪表板”;您需要:vent
needsdashboard
needsapplication
needsvent
当这种情况发生时,Require的响应基本上只是选择一个文件并使其工作,但是循环依赖关系中涉及的任何其他文件都是未定义的
您可以通过删除导入来测试这一理论,看看这是否修复了未定义的
。或者,用户可以下载一个名为xrayquire的工具,它可以帮助查找循环依赖项。我想我已经找到了答案,即使我不能100%确定原因
问题在于路由器的定义。通过引用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;
});
我不确定是否有更好的解决方案可以在路由器中定义您的视图,无论如何,这样做可以使您的路由器更轻,尤其是当您的视图数量增加时…您必须通过app.router访问路由器吗?你们能不能让仪表板本身就需要路由器,并直接访问它?只要应用程序已经执行(在那个时候它应该已经执行),那个么你们就不需要通过应用程序访问它。我认为您的问题肯定是一个复杂的循环依赖关系。感谢您的回复,我删除了除应用程序之外的所有内容,但仍然收到未定义的内容,所以请返回第一步。您是如何配置require.js的?你能报告你的垫片和路径配置吗?@Ingro我已经在我原来的问题中添加了这个,谢谢。我没有发现任何奇怪的地方,我正在使用类似的设置(我只是不代理木偶,在需要时使用完整的语法,如“new Backbone.marionete.Application()”),一切都很好。您是如何调用dashboard.js的?它是在主功能中定义的应用程序?“通风口”里面是什么?我移除了通风口,并添加了路由器,以便您可以看到仪表板是如何调用的。App是在main.js的底部定义的,我已经更新了它,所以它更清晰。(下图)谢谢你,我已经做了修改,现在一切都很好。你说得对,它也很轻,我不认为它们是必需的,即使它们不是必需的。我想我明白为什么会这样,谢谢你的帮助!