eg-259:ch15
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
eg-259:ch15 [2013/03/05 19:25] – [Define Model] eechris | eg-259:ch15 [2013/03/05 20:32] – [Router] eechris | ||
---|---|---|---|
Line 270: | Line 270: | ||
</ | </ | ||
- | [[http:// | + | [[http:// |
---- | ---- | ||
Line 289: | Line 289: | ||
</ | </ | ||
- | [[http:// | + | [[http:// |
---- | ---- | ||
Line 295: | Line 295: | ||
Render is a function that is used to build the DOM that represents the HTML in the view. Note '' | Render is a function that is used to build the DOM that represents the HTML in the view. Note '' | ||
- | ===== Render | + | ===== Initialize |
<code javascript> | <code javascript> | ||
- | (function ($) { | + | $(document).ready(function () { |
+ | projectApp = new HomeView(); | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | Here we call the view, defined as in the previous slide, on the '' | ||
+ | ===== Adding View Automatically ===== | ||
+ | |||
+ | <code javascript> | ||
+ | function ($) { | ||
HomeView = Backbone.View.extend({ | HomeView = Backbone.View.extend({ | ||
+ | el: ' | ||
+ | |||
+ | initialize: function () {...}, | ||
+ | |||
+ | render: function () {...} | ||
+ | }); | ||
+ | })(jQuery); | ||
+ | $(document).ready(function () { | ||
+ | projectApp = new HomeView(); | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | By defining the '' | ||
+ | ===== Multiple Views ===== | ||
+ | |||
+ | <code javascript> | ||
+ | HomeView = Backbone.View.extend({...}); | ||
+ | |||
+ | ListView = Backbone.View.extend({ | ||
+ | tagName: ' | ||
+ | initialize: function () {...}, | ||
render: function () { | render: function () { | ||
- | this.$el.append("< | + | |
+ | this.$el.append("< | ||
+ | | ||
return this; | return this; | ||
} | } | ||
}); | }); | ||
- | })(jQuery); | ||
</ | </ | ||
- | [[http:// | + | [[http:// |
---- | ---- | ||
- | Render is a function that is used to build the DOM that represents the HTML in the view. Note '' | + | Here, we add a '' |
- | ===== Define Model ===== | + | ===== Views can render other views ===== |
<code javascript> | <code javascript> | ||
- | (function ($) { | + | HomeView = Backbone.View.extend({ |
+ | el: ' | ||
+ | initialize: | ||
+ | this.render(); | ||
+ | }, | ||
+ | render: function () { | ||
+ | this.$el.empty(); | ||
+ | this.$el.append("< | ||
+ | this.listView = new ListView(); | ||
+ | this.$el.append(this.listView.render().el); | ||
+ | return this; | ||
+ | } | ||
+ | }); | ||
+ | </ | ||
- | Project = Backbone.Model.extend({}); | + | [[http:// |
- | firstProject | + | ---- |
- | title: 'Project 1' | + | |
+ | Here the home view has been extended and is being used to render the list view inside its own render method. You could render a whole tree of HTML elements in the same way. | ||
+ | ===== Templates ===== | ||
+ | |||
+ | * Templates extend the power of views by allowing arbitrary pieces of HTML to be stored and rendered at run time by the interpolation of simple fragments of JavaScript. | ||
+ | * There are several JavaScript templating libraries and Backbone is agnostic about which is used. | ||
+ | * The default in Backbone is underscore template: '' | ||
+ | |||
+ | ---- | ||
+ | |||
+ | A brief list would include: | ||
+ | * Moustache | ||
+ | * Handlebars | ||
+ | * Jade | ||
+ | * EJS | ||
+ | |||
+ | Use Google to find out more. | ||
+ | |||
+ | ===== A Simple Template ===== | ||
+ | |||
+ | In the HTML: | ||
+ | <code html> | ||
+ | <!-- undescore template ... compiles body then interpolates value at call time --> | ||
+ | <script type=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | Here we use a script with type of '' | ||
+ | |||
+ | The template syntax is very simple: anything between ''< | ||
+ | |||
+ | ===== Rendering a Template ===== | ||
+ | |||
+ | <code javascript> | ||
+ | ListView = Backbone.View.extend({ | ||
+ | : | ||
+ | | ||
+ | | ||
+ | }, | ||
+ | |||
+ | | ||
+ | this.$el.empty(); | ||
+ | this.$el.append("< | ||
+ | : | ||
+ | this.$el.append(this.template({value: | ||
+ | return this; | ||
+ | } | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | [[http:// | ||
+ | ---- | ||
+ | |||
+ | Here the HTML from the script tag with id '' | ||
+ | '' | ||
+ | |||
+ | This simple idea is remarkably powerful and is used in many popular server- and client-side web development frameworks. | ||
+ | |||
+ | ===== A Second Example ===== | ||
+ | |||
+ | <code javascript> | ||
+ | | ||
+ | var el = this.$el, | ||
+ | template = this.template; | ||
+ | |||
+ | el.empty(); | ||
+ | |||
+ | projects.each(function (project) { | ||
+ | el.append(template(project.toJSON())); | ||
+ | }); | ||
+ | |||
+ | return this; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | [[http:// | ||
+ | ---- | ||
+ | |||
+ | Here we use a similar template, this time outputting HTML view prepresenting each project in the collection. | ||
+ | |||
+ | |||
+ | ===== Router ===== | ||
+ | |||
+ | Here we have a more complex example using three templates: | ||
+ | * One for the Project list | ||
+ | * One for the project detail -- including a form for editing the title of the selected project | ||
+ | * One to render the list items themselves. | ||
+ | Here is the code: | ||
+ | [[http:// | ||
+ | |||
+ | ===== Router ===== | ||
+ | |||
+ | <code javascript> | ||
+ | AppRouter = Backbone.Router.extend({ | ||
+ | routes: { | ||
+ | "": | ||
+ | " | ||
+ | " | ||
+ | }, | ||
+ | home: function () { | ||
+ | console.log('home'); | ||
+ | new HomeView(); | ||
+ | }, | ||
+ | add: function () { | ||
+ | console.log(' | ||
+ | new AddView(); | ||
+ | } | ||
}); | }); | ||
+ | </ | ||
- | })(jQuery); | + | ---- |
+ | |||
+ | The purpose of the router is to define some " | ||
+ | |||
+ | ===== Router Initialisation ===== | ||
+ | |||
+ | <code javascript> | ||
+ | $(document).ready(function () { | ||
+ | projectApp = new AppRouter(); | ||
+ | Backbone.history.start(); | ||
+ | }); | ||
</ | </ | ||
- | [[http://jsfiddle.net/cpjobling/HHw5j/2/|jsFiddle]] - [[http:// | + | ---- |
+ | |||
+ | Here we create a new object representing the whole application as an '' | ||
+ | |||
+ | ===== Events on Views ===== | ||
+ | |||
+ | In the second router example | ||
+ | |||
+ | ===== Views Listening to Events ===== | ||
+ | |||
+ | In the final iteration | ||
===== Define Model ===== | ===== Define Model ===== |
eg-259/ch15.txt · Last modified: 2013/03/05 20:44 by eechris