A collection backed grid view.
This is not quite a 1.0 release, but it's pretty close. It works for the simple cases.
The grid view takes a container and an ampersand-collection and renders it into a grid with a set number of columns. Items will be rendered into the currently shortest column. Hence this module can be used to create a Pinterest-like grid of items.
var AmpGridView = ;var data = ; // Create a collection containing your modelsvar MyView = ;var gridView =view: MyViewcollection: datael: documentcolumnCount: 3gutter: 10viewOptions:// additional properties passed to new views.;
This will create a grid of three columns with 10px spacing between each view.
Each model in the collection
data will be represented by the view
If more models are added to the collection they will automatically render into the view.
Views can be asynchronous, meaning, you can tell the grid that you do not want
to be inserted right after rendering. But rather at some point later. You do
this by adding a property
async to your view and set it to
have the view emit a
ready event when it is ready to be drawn into the grid.
This is useful when you are rendering images of unknown sizes for example. Since the grid has to know the height of the view being rendered it can't just insert it into the grid and have the image load later, this will cause overlapping.
moduleexports = AmpersandView;
Note that currently there is not way to ensure ordering of views in async mode unless you keep track outside of the grid view yourself. This will be fixed in the future though.
If you need to change the number of colums based on the window size for example
you can do this by hooking up an event listener on the
resize event of the
window object. Then set the property
columnCount on the grid view and call
The grid view won't handle anything like this automatically.
A view will always be the container's width divided by column count. So you can
adjust the views widths by setting the width of the container yourself and
If you want endless scrolling you can just listen to the scroll event yourself and then when the user reaches the bottom you load more models and add them to the collection. They will automatically render in the grid.
You could use my toBottom module for this.
If you have different kinds of models in you collection and need to render
different kinds of views you can set the
view option to an object where the
model.type || model.getType() and the value is a matching view
All the views will be absolutely positioned within it's container. This is to make the layout job for the browser easier. DOM operations are also somewhat grouped together to decrease the repaints etc necessary.