Manage child views in a Backbone.View
Manage child views in a Backbone.View.
Backbone provides a lot of functionality in its views, but does not directly provide a way to manage child views or nested views. This is not terribly difficult to do on your own, but it gets tedious to write the same code over and over again.
Backbone.BabySitter provides a simple way to manage an unknown number of child views within a Backbone.View, or other object that needs to track a list of views.
Grab the source from the
src folder above. Grab the most recent builds
from the links below.
Backbone.BabySitter exposes one constructor function:
This constructor function contains all of the necessary code for managing a list of
Views can be added to a container by calling the
var container = ;containeraddsomeView;containeraddanotherView;
Views will be stored once and indexed in several ways:
view.model.cidif the view has a model
- by a custom index key
When adding a view, you can optionally specify a custom index key by which you can later retrieve the view.
containeraddaView "an indexer";
Note that the custom indexer should be unique within the container. If you add two different views with the same custom indexer, the last one in will be the only one stored by that index key.
An initial list of views can be added to the container through the constructor function call. This list must be an array of view instances:
var views = someView anotherView;var container = views;
You can retrieve a view by any of the index:
var container = ;containeraddsomeView;containeraddanotherView;containeraddcollectionView;containeraddaView "an indexer";// find by view cidvar s = containerfindByCidsomeViewcid;// find by modelvar av = containerfindByModelanotherViewmodel;// find by model cidvar av2 = containerfindByModelCidanotherViewmodelcid;// find by custom keyvar custv = containerfindByCustom"an indexer";// find by numeric index (unstable)var custv = containerfindByIndex0;
findBy* method cannot find the view, it will return undefined.
You can remove a view directly and it will be removed from all available indexes.
var container = ;containeraddview;// some time latercontainerremoveview;
To remove a view by an index, find it by that index and then remove the resulting view.
You can execute any arbitrary method with any arbitrary parameters on all of
the views within the container. There are two ways to do this:
container.apply. These methods work similarly to
function.apply in how parameters are passed through. However, they do not
allow the context to be specified. The view on which a method is being called
will always be the context of the call.
var View = BackboneViewextend;var v1 = ;var v2 = ;var container = ;containeraddv1;containeraddv2;// call the doStuff functioncontainercall"doStuff" 1 2;// apply the doStuff functioncontainerapply"doStuff" 1 2;
If any given view within the container does not have the method specified, it will not be called on that view. No errors will be thrown in this situation.
To get the number of stored views, call the
attribute. This attribute is updated any time a view is added or
var container = ;containeraddview;containeraddv2;containeraddv3;console.logcontainerlength; //=> 3containerremovev2;console.logcontainerlength; //=> 2
The container object borrows several functions from Underscore.js, to provide iterators and other collection functions, including:
These methods can be called directly on the container, to iterate and process the views held by the container.
var container = ;containeraddv1;containeraddv2;containeraddv3;// iterate over all of the viewscontainereach// process each view individually, here;
For more information about these methods, see the Underscore.js documentation.
For a complete change log, see the CHANGELOG.md file.
MIT - see LICENSE.md
npm install -g grunt-cli