Skip to end of metadata
Go to start of metadata

Demonstrates using data models with a widget.

App Folder Location

alloy/test/apps/widgets/models

The only difference when using models in a widget, compared to non-widget use, is that you use Widget.createModel() and Widget.createCollection() methods to create models and collections, respectively. These methods are directly analogous to Alloy.createModel() and Alloy.createCollection(). You can also use the Model and Collection tags in widget views.

The sample defines a widget named alloy.datatable that contains a <TableView/> and a <Collection/> element that creates a new Collection instance from the songs.js model file. Each <TableViewRow/> element is bound to the value of the info field defined by the songs collection. When a user selects a table row, the view-controller's handleTableClick  method is called.

app/widgets/alloy.datatable/views/widget.xml

The widget's view-controller populates the "songs" data collection with data using the Backbone reset() method. The handleTableClick() function uses the Backbone trigger() method to generate a "rowClick" event that's handled by the main application (see below).

app/widgets/alloy.datatable/controllers/widget.js

The main application view that contains a <Widget/> element that includes the alloy.datatable widget.

app/views/index.xml

The main view-controller uses the Backbone on() function to bind a function handler to the "rowClick" event generated by the TableView. 

app/controllers/index.js