diff --git a/backbone.js b/backbone.js
index bc08d58b..832dc8f4 100644
--- a/backbone.js
+++ b/backbone.js
@@ -322,17 +322,27 @@
// Add a model, or list of models to the set. Pass **silent** to avoid
// firing the `added` event for every new model.
add : function(models, options) {
- if (!_.isArray(models)) return this._add(models, options);
- for (var i=0; i
- refresh
fetch
@@ -1020,6 +1012,27 @@ accounts.fetch();
for interfaces that are not needed immediately: for example, documents
with collections of notes that may be toggled open and closed.
+ refresh
+ Here's an example using refresh to bootstrap a collection during initial page load,
+ in a Rails application.
+
createcollection.refresh(models, [options])
-
- Adding and removing models one at a time is all well and good, but sometimes
- you have so many models to change that you'd rather just update the collection
- in bulk. Use refresh to replace a collection with a new list
- of models (or attribute hashes), triggering a single "refresh" event
- at the end. Pass {silent: true} to suppress the "refresh" event.
- collection.fetch([options])
@@ -992,6 +982,8 @@ var Notes = Backbone.Collection.extend({
refreshing the collection when they arrive. The options hash takes
success and error
callbacks which will be passed (collection, response) as arguments.
+ When the model data returns from the server, the collection will
+ refresh.
Delegates to Backbone.sync
under the covers, for custom persistence strategies.
collection.refresh(models, [options])
+
+ Adding and removing models one at a time is all well and good, but sometimes
+ you have so many models to change that you'd rather just update the collection
+ in bulk. Use refresh to replace a collection with a new list
+ of models (or attribute hashes), triggering a single "refresh" event
+ at the end. Pass {silent: true} to suppress the "refresh" event.
+
+<script>
+ Accounts.refresh(<%= @accounts.to_json %>);
+</script>
+
collection.create(attributes, [options])
@@ -1150,7 +1163,9 @@ var DocumentRow = Backbone.View.extend({
model, collection,
el, id, className, and tagName.
If the view defines an initialize function, it will be called when
- the view is first created.
+ the view is first created. If you'd like to create a view that references
+ an element already in the DOM, pass in the element as an option:
+ new View({el: existingElement})
@@ -1204,11 +1219,7 @@ ui.Chapter = Backbone.View.extend({
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 already available. A good
+ and updates this.el with the new HTML. A good
convention is to return this at the end of render to
enable chained calls.
var Bookmark = Backbone.View.extend({
render: function() {
- $(this.el).html(this.template.render(this.model.toJSON()));
+ $(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
+ + Backbone is agnostic with respect to your preferred method of HTML templating. + Your render function could even munge together an HTML string, or use + document.createElement to generate a DOM tree. However, we suggest + choosing a nice JavaScript templating library. + Mustache.js, + Haml-js, and + Eco are all fine alternatives. + Because Underscore.js is already on the page, + _.template + is available, and is an excellent choice if you've already XSS-sanitized + your interpolated data. +
+ ++ Whatever templating strategy you end up with, it's nice if you never + have to put strings of HTML in your JavaScript. At DocumentCloud, we + use Jammit in order + to package up JavaScript templates stored in /app/views as part + of our main core.js asset package. +
+
makeview.make(tagName, [attributes], [content])
@@ -1279,7 +1312,7 @@ var DocumentView = Backbone.View.extend({
},
render: function() {
- $(this.el).html(this.template.render(this.model.toJSON()));
+ $(this.el).html(this.template(this.model.toJSON()));
this.handleEvents();
return this;
},
diff --git a/test/collection.js b/test/collection.js
index 1499b095..fb9cec85 100644
--- a/test/collection.js
+++ b/test/collection.js
@@ -58,20 +58,6 @@ $(document).ready(function() {
equals(col.first(), d);
});
- test("collections: refresh", function() {
- var refreshed = 0;
- var models = col.models;
- col.bind('refresh', function() { refreshed += 1; });
- col.refresh([]);
- equals(refreshed, 1);
- equals(col.length, 0);
- equals(col.last(), null);
- col.refresh(models);
- equals(refreshed, 2);
- equals(col.length, 4);
- equals(col.last(), a);
- });
-
test("collections: fetch", function() {
col.fetch();
equals(lastRequest[0], 'read');
@@ -111,4 +97,23 @@ $(document).ready(function() {
equals(col.min(function(model){ return model.id; }).id, 1);
});
+ test("collections: refresh", function() {
+ var refreshed = 0;
+ var models = col.models;
+ col.bind('refresh', function() { refreshed += 1; });
+ col.refresh([]);
+ equals(refreshed, 1);
+ equals(col.length, 0);
+ equals(col.last(), null);
+ col.refresh(models);
+ equals(refreshed, 2);
+ equals(col.length, 4);
+ equals(col.last(), a);
+ col.refresh(_.map(models, function(m){ return m.attributes; }));
+ equals(refreshed, 3);
+ equals(col.length, 4);
+ ok(col.last() !== a);
+ ok(_.isEqual(col.last().attributes, a.attributes));
+ });
+
});