A view optimized for rendering collections
A view optimized for rendering collections. Give the CollectionView a collection and a view to render each item with and it will take care of updating the view with the collection.
- Whenever a model is added or removed from a collection it will automatically be added or removed from the view.
- It will set loading and ready states as well as showing and hiding fallback content if there are no items in the list.
- If a model is added to a specific point in a collection it will render the item at the correct spot in the list
- It will clean up after itself so there are no memory leaks
In your web page:
Create a CollectionView and pass it the collection and the item view.
// Our collection of tasksvar tasks = ;// Create a view for a task list itemvar TaskListItemView = BackboneViewextendtemplate: 'templates/task';// Create a collection view. Tell it which view to// use for rendering the items. Alternatively this can be passed// into the options when creating a collectionview instance.var TaskListView = BackboneCollectionViewextenditemView: taskListItemView;// Now create an instance of the CollectionViewvar todolist =collection: tasks;// Render it on the pagetodolistrender;todolistrenderAllItems;// Add an item to the list and the collection// Listens for the 'add' event and creates a viewtaskscreatetitle: 'Pick up milk';// Shortcut to directly create a model in the collection// via the collection view.todolistaddtitle: 'Eat some bacon';
The first thing you need to know about creating a collection view is that it needs a view for the items and a collection.
The item view is the view that is used to render each of the models in the collection. eg. In a list of tasks the item view is the view for a single task item. Item views will have access to the model and the collection by default.
You can set the item view in a few ways:
var TaskListView = BackboneCollectionViewextenditemView: myItemView;
var TaskListView = BackboneCollectionViewextend;var list =itemView: myItemView;
You can use this to override the view set in the original definition as well. This allows you to use the same collection view for different types of lists that have the same functionality. For example, a list of albums in a library may have a cover view and a title view.
If you want to do some processing on the view before it's used then you can override the
var TaskListView = BackboneCollectionViewextendreturnmodel: model;;
render- Automatically render when an instance is created
renderItems- Automatically render the items. This will also call
itemView- The view to use to render each item in the collection
collection- required The collection whose models will be rendered.
There is a method named
afterRenderItem that will be fired whenever an item is rendered in the list.
You can override this method if you need to do some extra processing on views after they are rendered.
You can easily listen for events on the views in the collection too. Just add a
viewEvents object to your collection view.
This is handy for things like selections.
var TaskListItem = BackboneViewextendevents:'click': 'select'thistrigger'select' this;;var TaskListView = BackboneCollectionViewextenditemView: TaskListItemviewEvents:'select': 'onItemSelect'thisselected = ;thisselectedpushview;;
You can also listen for events on the collection easilt as well.
var TaskListView = BackboneCollectionViewextenditemView: TaskListItemcollectionEvents:'sort': 'onCollectionSort'# Do sorting stuff;
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.
Also, please don't edit files in the "dist" subdirectory as they are generated via grunt. You'll find source code in the "src" subdirectory!
0.1.0 - First release
Copyright (c) 2012 Anthony Short
Licensed under the MIT license.