Alloy binding example

README.md

These files show how to use Mads Møller's sqlrest adapter to fetch the remove video metadata and cache it locally in a sqlite database. Replace the underscores in the file names with slashes to get their actual location in your project.

Adapter Setup

There were two issues with the adapter code that you posted in pastie: the columns were missing from the adapter definition, and you needed to specify a custom parser function in order to pull out the embedded videos[i].video objects. Also, the data that were posted to pastie were not valid JSON, so I had to fix that. The data used for this example can be found here: http://pastie.org/8580518.

View

The index.xml file above shows a basic list view that uses item templates and Alloy's data binding to create a list of video titles. The docs for ListView show more details about how to set up list item templates and bind model properties. In brief:

1. Create a Collection element that declares the collection to use for the list data.
2. Create an ItemTemplate containing the UI controls that will display your data. Each UI control has to have a unique bindId attribute.
3. Create a ListSection with an dataCollection element that points to the Collection declared earlier. Each ListItem in the section maps model properties to bindId values plus UI element properties from the item template. For example, <ListItem title:text="{video_title}"/> maps the video_title property of the model to the text property of the Label with a bindId of "title". You can bind model properties to many different UI elements in the item template.

Controller

Creating the collection with the <Collection/> tag in the view automatically adds your collection to the Alloy.Collections global object. The only thing to do now is tell the persistence adapter to get the data by calling Alloy.Collections.video.fetch(), then open the window. Alloy's data binding automatically populates the list view with one row per collection element.

Next steps

You will probably want to add an itemId attribute to the ListItem containing each video's unique identifier as well as a click event handler to process clicks against the list.

controllers_index.js

Alloy.Collections.video.fetch();

$.index.open();

models_video.js

exports.definition = {  
    config: {
        "URL": "http://pastie.org/pastes/8580518/download",
        "debug": 1, 
        "columns": {
          allow_playback_control: "BOOLEAN",
          color: "TEXT",
          description: "TEXT",
          earnable_coupons: "INTEGER",
          earnable_points: "INTEGER",
          height: "INTEGER",
          id: "INTEGER NOT NULL",
          length: "INTEGER",
          prize_id: "INTEGER",
          protocol: "TEXT",
          provider: "TEXT",
          share_offer_id: "INTEGER",
          share_points: "INTEGER",
          sponsor_id: "INTEGER",
          thumbnail_content_type: "TEXT",
          thumbnail_file_name: "TEXT",
          thumbnail_file_size: "INTEGER",
          thumbnail_updated_at: "TEXT",
          title: "TEXT",
          url: "TEXT",
          width: "INTEGER",
          thumbnail_url: "TEXT",
          pseudo_streaming_url: "TEXT"       
        },
        "adapter": {
            "type": "sqlrest",
            "collection_name": "videos",
            "idAttribute": "id"
        },
        "headers": { // your custom headers
            "Accept": "text/html,application/xhtml+xml,application/xml"
        },
        "parentNode": function(data) {
           var entries = [];
           for (var i in data.videos) {
             entries.push(data.videos[i].video);
           }
           return entries;
        }
    },      
    extendModel: function(Model) {      
        _.extend(Model.prototype, {});
        return Model;
    },  
    extendCollection: function(Collection) {        
        _.extend(Collection.prototype, {});
        return Collection;
    }       
};

views_index.xml

<Alloy>
  <Collection src="video">
	<Window>
    <ListView defaultItemTemplate="by_name">
      <Templates>
        <ItemTemplate name="by_name">
          <View>
            <Label bindId="title"/>
          </View>
        </ItemTemplate>
      </Templates>
      <ListSection dataCollection="video">
        <ListItem title:text="{title}" itemId="{id}"/>
      </ListSection>
    </ListView>
	</Window>
</Alloy>