view prototype
<Collection src="myCollection"/>
<TableView dataCollection="myCollection" dataTransform="transformProperties" dataFilter="filterCollection">
<TableViewRow title="{title}"/>
</TableView>
controller prototype
// "model" refers to the current model being rendered from the collection. This transformation
// function should return a Javascript object containing properties that you want to
// modify and use in the binding. So for example, if we wanted to wrap the title from the model
// in square brackets we could do the following:
function transformProperties(model) {
// Get the JSON object representing the current model's attributes
var transform = model.toJSON();
// Make the aforementioned modification
transform.title = '[' + transform.title + ']';
// return the transformations, no changes will actually be made to the model
return transform;
}
// "collection" is the collection being used as the data source for the tableview. From this
// function we can return an array that is either the full set of models from the collection,
// or a filtered subset. The returned
function filterCollection(collection) {
return someConditionalFunction() ?
// return the full set of models from the collection
collection.models :
// render only models with "someString" in the title
collection.where({ title: title.indexOf('someString') !== -1 });
}
* - *dataCollection* will refer to an instance of a collection containing models that you would like to be iterated over in the associated view, in this case a TableView
* - *dataTransform* will refer to a function defined in the associated controller that will allow you to modify each model before rendering it in the "repeater". This will most commonly be for transformation and normalization of data.
* - *dataFilter* will refer to a function defined in the associated controller that will allow the developer to filter down the list of models from the collection that should be rendered as rows.
* - Both *dataTransform* and *dataFilter* are optional.
* - Bound properties from the models can be accessed using the *\{\}* notation, where the property refers to a property on the model.
* - The TableView should be able to render inline rows, as well as
rows as well.
* - When bindings are used in a separate controller, like if your TableViewRow definition is in its own controller, the current model can be references with the *$model* variable in the controller code.
The initial incarnation of model/collection-view binding in alloy is complete. Please check the linked tickets for details of how it was implemented as the prototype description in this ticket may be out of date. Additional work on this will be covered in new tickets if necessary.