First Demo Flip Book

More documents

Recommendations

Info

Displaying a Static View 9 ContactManager.mainRegion.show(staticView); means “put the contents of staticView inside the element corresponding to the jQuery selector #main-region”. With our latest modifications, our index.html now looks like this: index.html 1 2 3 4 5 Marionette Contact Manager 6 7 8 9 10 11 12 13 14 15 Contact manager 16 17 18 19 20 21 Here is static content in the web page. You'll notice that it gets 22 replaced by our app as soon as we start it. 23 24 25 26 This is text that was rendered by our Marionette app. 27 28 29 30 31 32 33
Displaying a Static View 10 34 35 36 ContactManager = new Marionette.Application(); 37 38 ContactManager.addRegions({ 39 mainRegion: "#main-region" 40 }); 41 42 ContactManager.StaticView = Marionette.ItemView.extend({ 43 template: "#static-template" 44 }); 45 46 ContactManager.on("initialize:after", function(){ 47 var staticView = new ContactManager.StaticView(); 48 ContactManager.mainRegion.show(staticView); 49 }); 50 51 ContactManager.start(); 52 53 54 We’ll see more of Marionette’s ItemView later on, but if you’re in a hurry you can refer to the documentation²³. Git commit to display our static view: cc1dfe888a2cfaad206b83cd1148cc6e4dc64a0c²⁴ Dynamically Specifying a View Template In the code above, we’ve specified the template as a permanent attribute on our view because we’re always going to want to use the same template in this case. But it’s also possible to dynamically provide templates to views, so let’s see how that’s done. We already have our app working to display a static view that is “hard-coded” within our view definition. So let’s override it at runtime with a different template. <strong>First</strong>, we need to define a new template to use, which we’ll include right below our existing template: ²³https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.itemview.md ²⁴https://github.com/davidsulc/marionette-gentle-introduction/commit/cc1dfe888a2cfaad206b83cd1148cc6e4dc64a0c
Page 2 and 3: Backbone.Marionette.js: A Gentle In
Page 4 and 5: Contents Foreword from Derick Baile
Page 6 and 7: Foreword from Derick Bailey The ope
Page 8 and 9: Following Along with Git This book
Page 10 and 11: Setting Up In this book, we’re go
Page 12 and 13: Setting Up 3 index.html 1 2 3 4
Page 14 and 15: Displaying a Static View Now that w
Page 16 and 17: Displaying a Static View 7 Displayi
Page 20 and 21: Displaying a Static View 11 1 2 Te
Page 22 and 23: Displaying a Static View 13 If you
Page 24 and 25: Displaying a Model Now that we’ve
Page 26 and 27: Displaying a Model 17 1 2 Here is
Page 28 and 29: Displaying a Model 19 Note that thi
Page 30 and 31: Displaying a Collection of Models M
Page 32 and 33: Displaying a Collection of Models 2
Page 42 and 43: Implementing Routing Our ContactMan
Page 44 and 45: Implementing Routing 35 Let’s bri
Page 46 and 47: Implementing Routing 37 10 listCont
Page 48 and 49: Implementing Routing 39 Redirecting
Page 50 and 51: Implementing Routing 41 DRYing up R
Page 52 and 53: Implementing Routing 43 10 var API
Page 54 and 55: Implementing Routing 45 Triggering
Page 56 and 57: Implementing Routing 47 Why don’t
Page 58 and 59: Chapters not in Sample This is a sa

First Demo Flip Book

Create successful ePaper yourself

Delete template?

Save as template?