eg-259:ch15
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
eg-259:ch15 [2013/03/05 19:29] – [Render View] eechris | eg-259:ch15 [2013/03/05 20:44] (current) – [Complete CRUD App (in-memory storage)] eechris | ||
---|---|---|---|
Line 270: | Line 270: | ||
</ | </ | ||
- | [[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 '' | ||
- | ===== 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 '' |
- | ===== Define Model ===== | + | ===== Adding View Automatically |
<code javascript> | <code javascript> | ||
- | (function ($) { | + | function ($) { |
+ | HomeView = Backbone.View.extend({ | ||
+ | el: ' | ||
- | Project = Backbone.Model.extend({}); | + | initialize: function |
- | firstProject = new Project({ | + | render: function |
- | title: ' | + | |
}); | }); | ||
- | |||
})(jQuery); | })(jQuery); | ||
+ | $(document).ready(function () { | ||
+ | projectApp = new HomeView(); | ||
+ | }); | ||
</ | </ | ||
- | [[http:// | + | [[http:// |
- | ===== Define Model ===== | + | ---- |
- | <code javascript> | + | By defining the '' |
- | (function ($) { | + | ===== Multiple Views ===== |
- | Project | + | <code javascript> |
+ | HomeView | ||
- | | + | |
- | | + | |
+ | initialize: function () {...}, | ||
+ | render: function () { | ||
+ | this.$el.empty(); | ||
+ | this.$el.append("< | ||
+ | this.$el.append("< | ||
+ | return this; | ||
+ | } | ||
}); | }); | ||
- | |||
- | })(jQuery); | ||
</ | </ | ||
- | [[http:// | + | [[http:// |
- | ===== Define Model ===== | + | ---- |
+ | |||
+ | Here, we add a '' | ||
+ | ===== 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 = new Project({ | + | ---- |
- | title: ' | + | |
- | }); | + | |
- | })(jQuery); | + | 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:// | ||
- | ===== Define Model ===== | + | |
+ | [[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> | <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: |
- | | + | * 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:// | ||
+ | |||
+ | ===== App Router ===== | ||
+ | |||
+ | <code javascript> | ||
+ | AppRouter = Backbone.Router.extend({ | ||
+ | | ||
+ | "": | ||
+ | " | ||
+ | " | ||
+ | }, | ||
+ | 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 ===== | ||
+ | |||
+ | In the second router example | ||
+ | |||
+ | ===== Views Listening to Events ===== | ||
+ | |||
+ | In the final iteration | ||
+ | |||
- | ===== Application Router ===== | ||
- | ===== Events ===== | ||
===== Complete CRUD App (in-memory storage) ===== | ===== Complete CRUD App (in-memory storage) ===== | ||
+ | |||
+ | * 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 '' | ||
+ | * It overrides the '' | ||
+ | * View the code for insight into how this works | ||
+ | |||
+ | [[http:// | ||
===== Summary of this Session ===== | ===== Summary of this Session ===== | ||
Line 402: | Line 533: | ||
* [[eg-259: | * [[eg-259: | ||
* [[eg-259: | * [[eg-259: | ||
- | ===== Homework Exercises ===== | ||
- | - Come up with something | ||
eg-259/ch15.1362511758.txt.gz · Last modified: 2013/03/05 19:29 by eechris