对于backbone.Marionette应用建议引导/样板样品 [英] suggested bootstrap/boilerplate sample for backbone.Marionette application
问题描述
有基于require.js建设backbone.marionette任何推荐的引导样板？
Is there any recommended bootstrap boilerplate for building backbone.marionette based on require.js?
有一个人自引导大规模backbone.marionette应用分享他们的经验？
Can some one share their experience with bootstrapping a large scale backbone.marionette app?
推荐答案
我会尽量回答我的问题与希望它可以帮助一些人。
I will try to answer my own question with hope it may help some people.
请注意，我不是专家，我敢肯定，这是不完美的，我认为这是适合我的需求。
Please note that I'm no expert and I'm sure this is not perfect, I think it's suitable for my needs.
请随意发表意见，并提出修改意见和改进，所以在时间上它会成为人们不平凡木偶实验项目一个良好的坚实起点。
Please feel free to comment and suggest changes and improvements, so in time it will become a good solid starting point for people experimenting with non trivial marionette projects.
应用程序结构：
一样的layoutManager发现这里
same as layoutManager found here
后续的要点可以在这里找到这里
gist of the follow can be found here here
FYI发现这个 Backbone.Marionette.Boilerplate
config.js文件：
config.js file:
// Use ECMAScript 5 Strict Mode
"use strict";
// Define jQuery as AMD module
define.amd.jQuery = true;
// Set the require.js configuration for your application.
require.config({
// Initialize the application with the main application file
deps: ["main"],
paths: {
libs: "../assets/js/libs",
plugins: "../assets/js/plugins",
// Libraries
jquery: "../assets/js/libs/jquery",
underscore: "../assets/js/libs/lodash",
backbone: "../assets/js/libs/backbone",
marionette: "../assets/js/libs/backbone.marionette",
handlebars: "../assets/js/libs/handlebars",
//plugins
text : "../assets/js/plugins/text",
i18n : "../assets/js/plugins/i18n",
cookie: '../assets/js/plugins/jquery.cookie',
//general
UserSession: "../assets/js/libs/userSession",
},
config: {
//Set the config for the i18n
//module ID
i18n: {
locale: 'fr-fr'
}
},
shim: {
marionette: {
deps: ['backbone'],
exports: 'Backbone.Marionette'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
handlebars: {
deps: [],
exports: "Handlebars"
}
}
});
main.js文件：
main.js file:
define([
"jquery",
"app",
"router",
'userSession'
],
function ($, App, router,userSession) {
"use strict";
$(function() {
App.Router = router;
App.start();
// if(userSession.authenticated())
//alert("us");
});
});
router.js文件：
router.js file:
define([
"backbone",
"marionette",
"controller",
],
function (Backbone, Marionette, controller){
"use strict";
var AppRouter = Backbone.Marionette.AppRouter.extend({
appRoutes: {
"path1" : "goto_path1",
"path2" : "goto_path2",
"path3" : "goto_path3"
}
});
return new AppRouter({controller: controller});
});
controller.js文件：
controller.js file:
define([
'jquery',
'underscore',
'backbone',
'marionette',
'app',
'userSession'
],
function($, _, Backbone, Marionette, App, userSession) {
return {
goto_path1: function () {
this.isAuthenticated();
require(['modules/files/files_for_modul1'], function(someview){
var currentView = new someview.Views.main();
App.main.currentView.content.show(currentView);
})
},
goto_path2: function () {
this.isAuthenticated();
require(['modules/files/files_for_modul2'], function(someOtherview){
var currentView = new someOtherview.Views.main();
App.main.currentView.content.show(currentView);
})
},
isAuthenticated: function() {
if(!userSession.authenticated()){
App.Router.navigate('login', {trigger: true});
}
}
}
});
app.js文件：
app.js file:
define([
'jquery',
'underscore',
'backbone',
'marionette',
'handlebars',
'text!templates/app_view.html',
'modules/mainMenuView/mainMenuView',
'modules/dashboard/dashboard',
],
function ($, _, Backbone, Marionette, Handlebars, tmpl, mainMenuView, dashboard ) {
Backbone.Marionette.TemplateCache.prototype.compileTemplate = function(rawTemplate) {
return Handlebars.compile(rawTemplate);
};
var App = new Backbone.Marionette.Application();
App.addRegions({
main: '#main'
});
App.addInitializer(function() {
this.initAppLayout();
});
App.on("initialize:after", function(){
Backbone.history.start({ pushState: true });
});
App.initAppLayout = function() {
AppLayout = Backbone.Marionette.Layout.extend({
template: tmpl,
regions: {
userInfo: "#userInfo",
mainMenu: "#mainMenu",
content: "#content"
},
});
var layout = new AppLayout();
App.main.show(layout);
App.main.currentView.mainMenu.show(new mainMenuView.Views.menu());
App.main.currentView.content.show(new dashboard.Views.main());
// this can be a main menu navigation
// this will change content at the "main" app screen
// your links should include the role=nav-main-app
$('a[role=nav-main-app]').click(function(e) {
App.Router.navigate( $(this).attr('href'), {trigger: true});
e.preventDefault();
});
};
return App;
});
userSession.js文件：
userSession.js file:
define([
'jquery',
'underscore',
'backbone',
'cookie'
],
function($, _, Backbone, cookie){
var UserSession = Backbone.Model.extend({
defaults: {
'accessToken': null,
'userId': null
},
initialize: function(){
this.load();
},
authenticated: function(){
return Boolean(this.get('accessToken'));
},
save: function(authHash){
$.cookie('userId', authHash.id);
$.cookie('accessToken', authHash.accessToken);
},
load: function(){
this.userId = $.cookie('userId');
this.accessToken = $.cookie('accessToken');
}
})
return new UserSession();
});
这篇关于对于backbone.Marionette应用建议引导/样板样品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
