require.config({ paths : { 'backbone' : './backbone', 'jquery' : './jquery', 'marionette' : './marionette', 'underscore' : './underscore' }, shim : { 'backbone' : { deps : ['jquery', 'underscore'], exports : 'Backbone' }, 'jquery' : { exports : 'jQuery' }, 'marionette' : { deps : ['jquery', 'underscore', 'backbone'],
exports : 'Marionette' }, 'underscore' : { exports : '_' } } });
var App = new Marionette.Application({ onInitializeBefore : function(options) { // execute before initializers... }, onInitializeAfter : function(options) { // execute after initializers },
onStart : function(options) { // execute after initializers & events }
});
App.addInitializer(function(options) {
// code to be run on application init
});
App.module("MyModule", function(MyModule, App, Backbone, Marionette, $, _){
// Private Data And Functions // -------------------------- var myData = "this is private data"; var myFunction = function(){ console.log(myData); } // Public Data And Functions // ------------------------- MyModule.someData = "public data";
this.someFunction = function(){ console.log(MyModule.someData); } });
App.module('MyModule').addInitializer(function() {});
_.extend(Controller, { someRouteController : function() { var views = []; // check that our router is ready // and other things... this.auth();
// destroy previous views
this.destroyViews();
// insert view, model, etc code here...
// render new views views this.renderViews(views); },
destroyViews : function() {
if (this.currentView) { while (this.currentView.length > 0) { this.currentView.pop().destructor(); } } },
renderViews : function(views) { this.currentView = views; for (var i = self.currentView.length - 1; i >= 0; i--) { this.currentView[i].render(); } },
auth : function() { // simply code that needs to be asserted before anything else can run } });
// define a controller var MyController = Marionette.Controller.extend({ initialize: function(options){ this.stuff = options.stuff; }, doStuff: function(){ this.trigger("stuff:done", this.stuff); } }); // create an instance var c = new MyController({ stuff : "some stuff" });
// use the built in EventBinder c.listenTo(c, "stuff:done", function(stuff){ console.log(stuff); }); // do some stuff c.doStuff();
var IndexRouter = Backbone.Router.extend({
initialize : function(options) {
this.app = options.app;
},
routes : {
'' : 'tilesBackbone',
'tilesbackbone' : 'tilesBackbone'
},
tilesBackbone : function() {
this.app.tilesBackbone();
}
});
MyRouter = Backbone.Marionette.AppRouter.extend({ controller : MyController, appRoutes : { "some/route": "someMethod" },
// standard backbone routes routes : { "some/otherRoute" : "someOtherMethod" }, someOtherMethod : function(){ // do something here. } });
var Tile = BaseView.extend({ el : '.tile-wrap',
events : { 'click .btn' : 'flip' },
subscriptions : { // add pub/sub subscriptions here... },
initialize : function(options) { _.bindAll(this); this.templar = options.templar; }, flip : function(e) { this.$el.find('.tile').toggleClass('flipped'); }, render : function() { this.templar.render({ path : 'tile', el : this.$el, data : {} }); } });
Backbone.Marionette.ItemView.extend({
tagName : 'fieldset',
ui: {
checkbox : 'input[type=checkbox]'
},
onRender: function() {
if (this.model.get('selected')) {
this.ui.checkbox.addClass('checked');
}
}
});