First Demo Flip Book

More documents

Recommendations

Info

Displaying a Static View 13 If you take a look at the source code (with Firebug or a comparable developer tool²⁵) after Marionette has rendered our view, you’ll see it is contained within a div tag: 1 2 This is text that was rendered by our Marionette app. 3 This is because Marionette needs an element to contain the view being inserted within the DOM, and by default, it’s a div. However, you can specify various attributes in your view, for example: 1 ContactManager.StaticView = Marionette.ItemView.extend({ 2 id: "static-view", 3 tagName: "span", 4 className: "instruction", 5 template: "#static-template" 6 }); Such a view definition would generate the following HTML when the view gets rendered: 1 2 This is text that was rendered by our Marionette app. 3 To learn more about view options, take a look at the Backbone documentation for the View constructor²⁶. It’s worth noting that just like the template property, these options can be provided when the view is being instantiated: 1 var staticView = new ContactManager.StaticView({ 2 id: "static-view", 3 tagName: "span", 4 className: "instruction" 5 }); Exercise Displaying a Single-Item List Display a single list item within a element, using this template: ²⁵To inspect the source code, you’ll need a developer tool such as Firebug, or similar for your browser (some browsers have tools built-in). This is because if you use the browser’s “View source code” menu entry, it will display the HTML it received originally. But since we’ve modified it heavily with javascript and we’re interested in viewing the current state, we need to display the source using developer tools. ²⁶http://backbonejs.org/#View-constructor
Displaying a Static View 14 1 2 One item 3 In addition, leave the ContactManager.StaticView template definition as it is, and specify the template to render during the view’s instantiation. You can, however, add other attributes to the view definition. You can see the exercise solution at the end of the book.
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 18 and 19: Displaying a Static View 9 ContactM
Page 20 and 21: Displaying a Static View 11 1 2 Te
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?