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:30] – [Initialize View] eechris | eg-259:ch15 [2013/03/05 20:41] – [Complete CRUD App (in-memory storage)] eechris | ||
---|---|---|---|
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 '' | ||
- | ===== Initialize View ===== | + | ===== Initialize View at Startup |
<code javascript> | <code javascript> | ||
- | initialize: | + | $(document).ready(function () { |
- | | + | |
- | | + | }); |
- | }, | + | |
</ | </ | ||
- | [[http:// | + | [[http:// |
---- | ---- | ||
- | The '' | + | Here we call the view, defined as in the previous slide, on the '' |
- | + | ===== Adding | |
- | ===== Initialize | + | |
<code javascript> | <code javascript> | ||
- | initialize: function () { | + | function ($) { |
- | this.$el.empty(); | + | HomeView = Backbone.View.extend({ |
- | this.render(); | + | el: ' |
- | }, | + | |
+ | | ||
+ | |||
+ | render: function () {...} | ||
+ | }); | ||
+ | })(jQuery); | ||
+ | $(document).ready(function () { | ||
+ | projectApp = new HomeView(); | ||
+ | }); | ||
</ | </ | ||
- | [[http:// | + | [[http:// |
---- | ---- | ||
- | The '' | + | By defining the '' |
- | + | ===== Multiple Views ===== | |
- | ===== Initialize View ===== | + | |
<code javascript> | <code javascript> | ||
- | initialize: function () { | + | HomeView = Backbone.View.extend({...}); |
- | this.$el.empty(); | + | |
- | this.render(); | + | ListView = Backbone.View.extend({ |
- | }, | + | tagName: ' |
+ | | ||
+ | | ||
+ | | ||
+ | this.$el.append("< | ||
+ | | ||
+ | return this; | ||
+ | | ||
+ | }); | ||
</ | </ | ||
- | [[http:// | + | [[http:// |
---- | ---- | ||
- | The '' | + | Here, we add a '' |
- | + | ===== Views can render other views ===== | |
- | ===== Initialize View ===== | + | |
<code javascript> | <code javascript> | ||
- | initialize: function () { | + | HomeView = Backbone.View.extend({ |
- | this.$el.empty(); | + | el: ' |
- | this.render(); | + | |
- | }, | + | |
+ | }, | ||
+ | render: function () { | ||
+ | | ||
+ | this.$el.append("< | ||
+ | this.listView = new ListView(); | ||
+ | this.$el.append(this.listView.render().el); | ||
+ | | ||
+ | | ||
+ | }); | ||
</ | </ | ||
- | [[http:// | + | [[http:// |
---- | ---- | ||
- | The '' | + | Here the home view has been extended |
+ | ===== Templates ===== | ||
- | ===== Initialize View ===== | + | * 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: '' | ||
- | <code javascript> | + | ---- |
- | initialize: function () { | + | |
- | | + | A brief list would include: |
- | | + | |
- | }, | + | |
- | </ | + | * Jade |
+ | * EJS | ||
+ | |||
+ | Use Google to find out more. | ||
+ | |||
+ | ===== A Simple Template ===== | ||
- | [[http://jsfiddle.net/cpjobling/ | + | In the HTML: |
+ | <code html> | ||
+ | <!-- undescore template ... compiles body then interpolates value at call time --> | ||
+ | <script type=" | ||
+ | < | ||
+ | </script> | ||
+ | </code> | ||
---- | ---- | ||
- | The '' | + | Here we use a script with type of '' |
+ | The template syntax is very simple: anything between ''< | ||
- | ===== Define Model ===== | + | ===== Rendering a Template |
<code javascript> | <code javascript> | ||
- | (function ($) { | + | ListView = Backbone.View.extend({ |
+ | : | ||
+ | | ||
+ | | ||
+ | }, | ||
- | Project = Backbone.Model.extend({}); | + | |
+ | this.$el.empty(); | ||
+ | this.$el.append("< | ||
+ | : | ||
+ | this.$el.append(this.template({value: "Hello Backbone" | ||
+ | return this; | ||
+ | } | ||
+ | }); | ||
+ | </ | ||
- | firstProject = new Project({ | ||
- | title: ' | ||
- | }); | ||
- | })(jQuery); | ||
- | </ | ||
- | [[http:// | + | [[http:// |
+ | ---- | ||
- | ===== Define Model ===== | + | 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> | <code javascript> | ||
- | (function ($) { | + | render: |
+ | var el = this.$el, | ||
+ | template = this.template; | ||
- | Project = Backbone.Model.extend({}); | + | el.empty(); |
- | firstProject = new Project({ | + | projects.each(function (project) |
- | | + | |
- | }); | + | }); |
- | })(jQuery); | + | return this; |
+ | } | ||
</ | </ | ||
- | [[http:// | + | [[http:// |
+ | ---- | ||
- | ===== Define Model ===== | + | Here we use a similar template, this time outputting HTML view prepresenting each project in the collection. |
- | <code javascript> | ||
- | (function ($) { | ||
- | Project | + | ===== Router ===== |
- | firstProject = new Project({ | + | Here we have a more complex example using three templates: |
- | title: | + | * One for the Project |
- | }); | + | * 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:// | ||
- | })(jQuery); | + | ===== App Router ===== |
+ | |||
+ | <code javascript> | ||
+ | AppRouter = Backbone.Router.extend({ | ||
+ | routes: { | ||
+ | "": | ||
+ | " | ||
+ | " | ||
+ | | ||
+ | home: function () { | ||
+ | console.log(' | ||
+ | new HomeView(); | ||
+ | }, | ||
+ | add: function () { | ||
+ | console.log(' | ||
+ | new AddView(); | ||
+ | } | ||
+ | }); | ||
</ | </ | ||
- | [[http:// | + | ---- |
- | ===== Define Model ===== | + | The purpose of the router is to define some " |
+ | |||
+ | ===== Router Initialisation | ||
<code javascript> | <code javascript> | ||
- | (function ($) { | + | $(document).ready(function () { |
+ | projectApp = new AppRouter(); | ||
+ | Backbone.history.start(); | ||
+ | }); | ||
+ | </ | ||
- | Project = Backbone.Model.extend({}); | + | ---- |
- | firstProject = new Project({ | + | Here we create a new object representing the whole application as an '' |
- | title: | + | |
- | }); | + | |
- | })(jQuery); | + | ===== Events ===== |
- | </ | + | |
- | [[http:// | + | In the second router example |
- | ===== Define Model ===== | + | ===== Views Listening to Events |
- | <code javascript> | + | In the final iteration [[http:// |
- | (function ($) { | + | |
- | Project = Backbone.Model.extend({}); | ||
- | firstProject = new Project({ | ||
- | title: ' | ||
- | }); | ||
- | })(jQuery); | + | ===== Complete CRUD App (in-memory storage) ===== |
- | </ | + | |
- | [[http:// | + | * This final version of the app includes a facility for showing existing projects and allowing their titles to be edited. |
+ | * The app now has an '' | ||
+ | * View the code for insight into how this works | ||
- | ===== Application Router ===== | + | [[http:// |
- | ===== Events ===== | + | |
- | ===== Complete CRUD App (in-memory storage) ===== | + | |
===== Summary of this Session ===== | ===== Summary of this Session ===== | ||
eg-259/ch15.txt · Last modified: 2013/03/05 20:44 by eechris