marionette script

gistfile1.js

// sample

var MyView = Marionette.ItemView.extend({
  template: "my-template-id"
});
var myView = new MyView({ model: Dog});
myView.render();


// ItemView sample

MyView = Backbone.Marionette.ItemView.extend({
  template: "#myTemplate",
  ui: {
  "flag" : "#myFlag"
  },
  modelEvents: {
    "change": "modelChanged"
  },
  modelChanged: function() {
    this.ui.flag.html("changed!");
  }
});
var view = new MyView({model: myModel});
view.render();


// Collection View

MenuListView = Marionette.CollectionView.extend({
  tagName: "ul",
  itemView: MenuItemView
});

var menuList = new MenuListView({collection: menu});
menuList.render();


// CompositeView

var GridRow = Backbone.Marionette.ItemView.extend({
    template: "#row-template",
    tagName: "tr"
});
var GridView = Backbone.Marionette.CompositeView.extend({
    tagName: "table",
    template: "#grid-template",
    itemView: GridRow,
    appendHtml: function(collectionView, itemView){
        collectionView.$("tbody").append(itemView.el);
    }
});


// Region

var myView = new MyView();
mainRegion.show(myView);
mainRegion.close();



// Layout

AppLayout = Backbone.Marionette.Layout.extend({
  template: "#layout-template",
  regions: {
    menu: "#menu",
    content: "#content"
  }
});
var layout = new AppLayout();
layout.render();

layout.menu.show(new MenuView());
layout.content.show(new MainContentView());


// AppRouter + Controller

myController = Marionette.Controller.extend({
  doFoo: function(){
    console.log("FOO!");
  }
});
var MyRouter = new Marionette.AppRouter({
  controller: myController,
  appRoutes: {
    "foo": "doFoo"
  }
});




// Application
MyApp = new Backbone.Marionette.Application();
MyApp.addRegions({ mainRegion: "#main-div" });

MyApp.addInitializer(function(options){
  var myView = new MyView({ model: options.someModel });
  MyApp.mainRegion.show(myView);
});

MyApp.addInitializer(function(options){
  new MyAppRouter();
  Backbone.history.start();
});

MyApp.start();



// commands

MyApp = new Marionette.Application();
MyApp.commands.setHandler("foo", function(){
  console.log("FOO HIT");
});
MyApp.execute("foo");



// Request/Response

MyApp = new Marionette.Application();
MyApp.reqres.setHandler("foo",function(){
  return "RESPONSE HIT";
});
MyApp.request("foo");


// Event

MyApp = new Backbone.Marionette.Application();
MyApp.vent.on("foo", function(){
  alert("bar");
});
MyApp.vent.trigger("foo");