-var list = new Backbone.Collection([
- new Backbone.Model({name: "Moe"}),
+var stooges = new Backbone.Collection([
new Backbone.Model({name: "Curly"}),
- new Backbone.Model({name: "Larry"})
+ new Backbone.Model({name: "Larry"}),
+ new Backbone.Model({name: "Moe"})
]);
-alert(JSON.stringify(list.pluck("name")));
+var names = stooges.pluck("name");
+
+alert(JSON.stringify(names));
+ Backbone views are almost more convention than they are code. + The general idea is to organize your interface into logical sections, + backed by models, each of which can be updated independently when the + model changes. Instead of digging into a JSON object and looking up an + element in the DOM, and updating the HTML by hand, it should look more like: + model.bind('change', view.render) — and now everywhere that + model data is displayed in the UI, it is always immediately up to date. +
+ +
+ elview.el
+
+ All views have a DOM element at all times (the el property),
+ whether they've already been inserted into the page or not. In this
+ fashion, views can be rendered at any time, and inserted into the DOM all
+ at once, in order to get high-performance UI rendering with as few
+ reflows and repaints as possible.
+
+ $ (jQuery)view.$(selector)
+
+ If jQuery is included on the page, each view has a $ or jQuery
+ function that runs queries scoped within the view's element. If you use this
+ scoped jQuery function, you don't have to use model ids as part of your query
+ to pull out specific elements in a list, and can rely much more on HTML class
+ attributes. It's equivalent to running: $(selector, this.el)
+
+ui.Chapter = Backbone.View.extend({
+ serialize : function() {
+ return {
+ title: this.$(".title").text(),
+ start: this.$(".start-page").text(),
+ end: this.$(".end-page").text()
+ };
+ }s
+});
+
+
+
+ renderview.render()
+
+ The default implementation of render is a no-op. Override this
+ function with your code that renders the view template from model data,
+ and updates this.el with the new HTML. You can use any flavor of
+ JavaScript templating or DOM-building you prefer. Because Underscore.js
+ is already on the page, _.template is available. The convention is to
+ return this at the end of render to enable chaining.
+
+ui.Chapter = Backbone.View.extend({
+ render : function() {
+ var data = this.model.attributes();
+ $(this.el).html(this.template.render(data));
+ return this;
+ }
+});
+