How should I bootstrap my web app using Backbone.Marionette and requireJs - backbone.js

Let's say my app works but I love to learn and to find the best way of doing things.
I really appreciate this post about Reducing Backbone Routers To Nothing More Than Configuration.
And the following bbclonemail which is not using requires.
Actually my implementation is a monolithic block (app.js, router.js).
Here's my questions:
1) What should the router module router.js return?
2) How should I remove The Callback Functions from router.js ?
3) What should the app module app.js return?
4) How should I decouple the app.js in many others apps (for example: main, tasks, projects)
app.js
// app.js
define([
'router'
// some modules
],
function (router, Backbone, HeaderView)
{
"use strict";
var myApp = new Backbone.Marionette.Application();
myApp.addRegions({
header: '#header',
sidebar: '#sidebar',
mainColumn: '#main-column',
rightColumn: '#right-column'
});
myApp.initHeader = function () {
var headerView = new HeaderView();
myApp.header.show(headerView);
}
// many others many views
myApp.start();
myApp.initialize = function() {
router.initialize();
Backbone.history.start();
}
return myApp;
});
router.js
// router.js
define([
// some modules
],
function (Backbone)
{
"use strict";
var AppRouter = Backbone.Marionette.AppRouter.extend({
routes: {
tasks: 'tasks',
projects: 'projects',
// many others keys/values
'*defaults': 'home'
},
getApp: function ()
{
var mainApp;
require(['js/app'], function (app) {
mainApp = app;
});
return mainApp;
},
home: function()
{
var app = this.getApp();
app.initHeader();
app.initSidebar();
app.initTaskDetails();
},
// many others callbacks
});
var initialize = function() {
new AppRouter;
};
return {
initialize: initialize
};
});

For the Router part you should make like this:
router.js
// router.js
define([
'rooterController'
// some modules
],
function (Backbone, rooterController)
{
"use strict";
var AppRouter = Backbone.Marionette.AppRouter.extend({
routes: {
tasks: 'tasks',
projects: 'projects',
// many others keys/values
'*defaults': 'home'
}
});
return new AppRouter({constroller: rooterController})
});

Related

how can I get rid : TypeError: communityApp.activeTabLayout.pforum is undefined

my code of module is.
spine.module('communityApp', {
startWithParent: false,
define: function (communityApp, App, Backbone, Marionette, $, _) {
console.log("communityApp.js");
// Setup the router for this module
var Router = Marionette.AppRouter.extend({
before: function () {
console.log("communityApp.js: router.before()")
App.startSubApp("communityApp", {});
},
appRoutes: {
"community": "showCommunityTab",
"community/pforum": "getPforum",
"community/questions":"getQuestions",
"community/events": "getEvents"
}
});
// Startup router
App.addInitializer(function () {
console.log("communityApp.js: App.addInitializer()")
// contains active controller
communityApp.activeController = new communityApp.Controllers.tabController();
// initializing route
communityApp.Router = new Router({
controller: communityApp.activeController
});
});
// Let app know we started
communityApp.addInitializer(function () {
console.log("communityApp.js: DemoApp.addInitializer()");
App.vent.trigger("app:started", "communityApp");
});
// This will run when a sub app (module) starts
communityApp.on("start", function () {
console.log("communityApp.js: on 'Start'()");
});
code of controller is.
spine.module("communityApp", function (communityApp, App, Backbone, Marionette, $, _) {
"use strict";
// initializing controllers and collections for message tabs
communityApp.Controllers = {};
communityApp.Collections = {};
communityApp.Controllers.tabController = Marionette.Controller.extend({
showCommunityTab: function () {
this.getCommunityTab();
},
getCommunityTab: function (data) {
//var tabLayout = new communityApp.Views.tabLayout();
//tabLayout.render();
// creating active layout
communityApp.activeTabLayout = new communityApp.Views.tabLayout();
communityApp.activeTabLayout.render();
// loading community module view
App.regionMain.show(communityApp.activeTabLayout);
// load pforum on community module load
this.getPforum();
},
getPforum : function(){
console.log('Public Forum Tab');
var pforum = new communityApp.Controllers.pforumController();
pforum.init();
},
getQuestions : function(){
console.log('Question tab');
var questions = new communityApp.Controllers.questionsController();
questions.init();
},
getEvents : function(){
console.log('Events tab');
var events = new communityApp.Controllers.eventController();
events.init();
}
});
Code where error is, Its a tab page.
spine.module("communityApp", function (communityApp, App, Backbone, Marionette, $, _) {
"use strict";
communityApp.Controllers.pforumController = Marionette.Controller.extend({
init: function(){
var func = _.bind(this._getPforum, this);
$.when(App.request('alerts1:entities' , {origin:'pforum'}))
.then(func)
},
_getPforum:function(data){
// populating the data
communityApp.activeTabLayout.pforum.show(new communityApp.CollectionViews.pforumCollectionViews({
collection: data
}));
}
});
That's because you're creating the activeTabLayout in getCommunityTab, and you're trying to access it after creating the controller in getPforum. These are both attached to separate routes. Therefore you're not guarenteed that communityApp.activeTabLayout exists inside of your init method.
community/pforum -> creates your controller, but not your tab layout.
community -> creates your tab layout, but not your controller.
You need to make sure communityApp.activeTabLayout = new communityApp.Views.tabLayout(); runs before pforum.init();

Backbone, Marionette, RequireJS application startup

I'm building an app with Backbone, Marionette and RequireJS and I'd like to run by some more experienced people if the Application startup could be refined/improved in any way.
Folder structure:
index.html
js/
collections/
libs/
backbone.js
marionette.js
require.js
...
models/
views/
app.js
init.js
router.js
Currently the app's bootstrapping is as follows.
index.html defines the requireJS entry-point as:
<script data-main="js/init" src="js/libs/require.js"></script>
init.js does the RequireJS configuration and:
require(['app'], function(App){
App.start();
});
The App module in app.js:
App = new Backbone.Marionette.Application();
App.addInitializer(function (options) {
// initialize the Router; will only setup the routes and corresponding callbacks; not history.start()
App.router = new Router();
// initialize Marionette regions
App.addRegions({
'header': '#header',
'main': '#main',
'footer': '#footer'
});
});
App.on('start', function(options) {
Backbone.history && Backbone.history.start() || console.error('No "Backbone.history" to .start()');
});
return App;
The Router module in router.js:
return Backbone.Router.extend({
routes: {
'panel/:handle': 'showPanel',
},
showPanel: function (handle) {
require(['app'], function (App) {
App.main.show(new Panel_v({userHandle: handle}));
});
}
});
Is there a way to make the Router module less convoluted? I worked out this way to solve the cyclic dependency problem formed by App->Router->App.
Any other suggestions?
I've come to this solution lately, joining up App and Router in the main.js file:
App.js
define(['marionette'], function(Marionette) {
var App;
App = new Backbone.Marionette.Application();
App.vars = {};
App.addRegions({
headerRegion: "#header-region",
mainRegion: "#main-region",
footerRegion: "#footer-region",
dialogsRegion: "#dialogs"
});
App.vent.on("routing:started", function() {
Backbone.history.start();
});
return App;
});
Router.js
define(['marionette', 'app'], function(Marionette, App) {
var appRouter, routerController;
routerController = {
showViaggi: function() {
return require(['modules/viaggi/viaggi'], function(Viaggi) {
App.Modules.viaggi = new Viaggi();
return App.Modules.viaggi.start();
});
}
};
return appRouter = Backbone.Marionette.AppRouter.extend({
appRoutes: {
'viaggi': 'showViaggi'
},
controller: routerController
});
});
And the Main.js, my initial script loaded with Require.js
define(['app', 'routers/appRouter'], function(App,appRouter) {
App.addInitializer(function() {
App.Router = new appRouter;
return App.vent.trigger("routing:started");
});
return App.start();
});

Backbone.js Router event binding not firing

I'm trying to follow Organizing your application using Modules (require.js I'm struggling to understand how routing works.
I cannot get simple binding to work for index:
// Filename: router.js
define([
'jquery',
'underscore',
'backbone',
'views/projects/list'
], function ($, _, Backbone, ProjectListView) {
var AppRouter = Backbone.Router.extend({
routes: {
// Define some URL routes
'': 'index'
}
});
var initialize = function () {
var app_router = new AppRouter();
app_router.on('index', function () {
alert("index"); // this never gets called
});
Backbone.history.start();
return app_router;
};
return {
initialize: initialize
};
});
When page is loaded nothing happens. This however works:
// Filename: router.js
define([
'jquery',
'underscore',
'backbone',
'views/projects/list'
], function ($, _, Backbone, ProjectListView) {
var AppRouter = Backbone.Router.extend({
routes: {
// Define some URL routes
'': 'index'
},
index: function() { alert("works"); }
});
var initialize = function () {
var app_router = new AppRouter;
Backbone.history.start();
return app_router;
};
return {
initialize: initialize
};
});
Am I missing something?
Ok, so this is how it's done:
var initialize = function () {
var app_router = new AppRouter();
app_router.on("route:index", function () {
alert("hello world");
});
Backbone.history.start();
return app_router;
};

Unable to reach view via router in Backbone.js + RequireJS

I've been trying to practice on backbone.js, I found one tutorial online which I was trying to follow (http://backbonetutorials.com/what-is-a-router/) but unfortunately i have problem reaching to my view through the router.
Below is my code
main.js
requirejs.config({
// create local alias for package
paths: {
l : 'my/vehicle',
underscore : 'vendors/underscore',
jqueryui : 'vendors/jquery-ui/js/jquery-ui-1.9.0.custom.min',
backbone : 'vendors/backbone',
bootstrap : 'vendors/bootstrap'
},
shim: {
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
underscore: {
exports: "_"
}
}
})
require(['../../config'], function(core){
require(["l/app"], function(App) {
'use strict';
App.initialize();
});
});
app.js
define(["jquery", "backbone", "l/router"], function($, Backbone, Router) {
var initialize = function(){
// Pass in our Router module and call it's initialize function
Router.initialize();
}
return {
initialize: initialize
};
});
router.js
define([
'jquery',
'underscore',
'backbone',
'l/views/BrowseVehicle'
], function($, _, Backbone, BrowseVehicleView){
var AppRouter = Backbone.Router.extend({
routes: {
// Define some URL routes
'/browse' : 'showVehicleBrowse',
// Default
'*actions' : 'defaultAction'
}
});
var initialize = function(){
var app_router = new AppRouter;
app_router.on('showVehicleBrowse', function(){
// Call render on the module we loaded in via the dependency array
console.log('am here');
var BrowseVehicleView = new BrowseVehicleView();
BrowseVehicleView.render();
});
app_router.on('defaultAction', function(actions){
// We have no matching route, lets just log what the URL was
console.log('No route:', actions);
});
Backbone.history.start();
};
return {
initialize: initialize
};
});
views/BrowseVehicle.js
define([
'jquery',
'underscore',
'backbone'
], function($, _, Backbone){
var BrowseVehicleView = Backbone.View.extend({
el: $('#vehicle-browse-form'),
render: function(){
// Using Underscore we can compile our template with data
console.log('I reached vehicle browse form');
}
});
// Our module now returns our view
return BrowseVehicleView;
});
There is no error on loading the code, console.log is not printing anything in the view nor in the router inside the routed function. I tried to access my urls using URL/#/browse but not getting the console.log statement.
Can anyone please advise?
In the routes {} definition remove the forward slash in front of browse.

Backbone with dynamic views

I am trying to achive something like this in backbone js
var AppRouter = Backbone.Router.extend({
routes: {
// MVC like route
':controller': 'defaultRoute',
// MVC like route
':controller/:action': 'defaultRoute',
// MVC like route
':controller/:action/:id': 'defaultRoute',
// MVC like route
':controller/:action/*id': 'defaultRoute'
},
defaultRoute: function (controller, action, id) {
// render view here or
// call another specific route regarding to controller parameter
}
});
var appRouter = new AppRouter;
Backbone.history.start();
So when url is: something.com/#home/index defaultRoute function will get parameters controller="home" and action="index".
I am wondering now how to find view (Backbone.View) in folder "controller/home/index" and instantiate dynamically (and render). Also wondering if better approach would be to have Backbone.Router for each "controller" (I am using name "controller" but it is actually "router").
Any ideas?
UPDATE with possible solution!
I ended up with this
// Filename: router.js
define([
'jquery',
'underscore',
'backbone'
], function ($, _, Backbone) {
var AppRouter = Backbone.Router.extend({
routes: {
// MVC like route
':controller': 'defaultRoute',
// MVC like route
':controller/:action': 'defaultRoute',
// MVC like route
':controller/:action/:id': 'defaultRoute',
// MVC like route
':controller/:action/*id': 'defaultRoute'
},
defaultRoute: function (controllerName, actionName, id) {
controllerName = controllerName || Config.Defaults.Controller;
actionName = actionName || Config.Defaults.Action;
require(["controllers/" + controllerName], function (ctl) {
var code = "ctl." + actionName + "();";
eval(code);
});
}
});
var appRouter = new AppRouter;
Backbone.history.start();
});
And sample controller is this
define([
'jquery',
'underscore',
'backbone'
], function ($, _, Backbone) {
return {
index: function () {
console.log("Action: Index");
},
about: function () {
console.log("Action: About");
}
};
});
It works with this sample. Now trying to solve params binding etc. Need more testing.
At this time I am still investigating but here is the code I am using at the moment:
// Filename: router.js
define([
'jquery',
'underscore',
'backbone'
], function ($, _, Backbone) {
var AppRouter = Backbone.Router.extend({
routes: {
// MVC like route
':controller': 'defaultRoute',
// MVC like route
':controller/:action': 'defaultRoute',
// MVC like route
':controller/:action/:id': 'defaultRoute',
// MVC like route
':controller/:action/*id': 'defaultRoute'
},
defaultRoute: function (controllerName, actionName, id) {
controllerName = controllerName || Config.Defaults.Controller;
actionName = actionName || Config.Defaults.Action;
require(["controllers/" + controllerName], function (ctl) {
var code = "ctl." + actionName + "();";
eval(code);
});
}
});
var appRouter = new AppRouter;
Backbone.history.start();
});
So "controller" looks like
// Filename: controllers/home.js
define([
'jquery',
'underscore',
'backbone',
], function ($, _, Backbone) {
return {
index: function () {
require(['views/home/index'], function (view) {
view.render();
});
},
about: function () {
require(['views/home/about'], function (view) {
view.render();
});
}
};
});
Next is to create typical backbone views.
I will post more when I test passing parameters and do some more complicated tests.
JS client side dynamic dependency loading, I think this is still in our dreams.
You can play with very tricky technics like Dynamic Script Loading but even if it looks easy at the beginning it is gonna become in a nightmare (sooner or later).
If you need a technic like this be sure it worths it, you should try to think it again.
About if to use one Router for the whole application or separate it in several Routers by controllers/modules or whatever I have already said my opinion about.

Resources