-
-
Save bafxyz/0e8b5c2bd196c3531bdc to your computer and use it in GitHub Desktop.
marionette script
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment