Alloy Data Binding with ListViews

Inspired by the great blog post by Jason Kneen on the Appcelerator website (Data-binding Made Easy with Alloy) and a question by someone on tiSlack about data binding and ListViews, I decided to write this post. Using the code and approach from Jason’s blog, I wanted to modify and expand on a few things. Specifically, in this post I’m going to focus on Binding Data to a ListView instead of a TableView.

In subsequent posts I will be expanding on this example to show:

1. Using templates to show a message when ListView has no data
2. Attaching a search bar to the ListView

First, if you have not read Jason’s blog, go do that. I will be using and building on where he started, so you need to review or this will make less/no sense. I’ll wait here until you’re done.

Binding data to a ListView

So, now that you have the background, let’s look at data binding for a ListView. ListViews are a little more complex than tableviews as each row in a listview is bound to an item template. Templates can be built in or defined in your xml. (See the ListViews Guide for more info). For our template, we are going to duplicate the tableView layout.

<ItemTemplate name="post" id="post" height='50dp'>
<ImageView bindId="img" id="thumbnail" ></ImageView>
<Label bindId="title" id="title"></Label>
</ItemTemplate>

The item template includes two objects, the image view and the label. The important thing to note is that each object in the template has a bindId property. That property will allow us to connect our data in the collection to the object in the template when we define our List View Items.

Since we are using the same id’s as the TableView example, the tss file has not changed.

We are using the dataset created in alloy.js. I am including it below for reference. The collection that was created has two data elements, thumbnailUrl and title.

Alloy.Globals.mocx = require("mocx");
Alloy.Globals.mocx.createCollection("posts", [{
thumbailUrl: "http://someimage",
title: "First post"
}, {
thumbailUrl: "http://someotherimage",
title: "Second post"
}]);

Now we need to define the List Item in our List View. The XML looks like this:

<ListItem
img:image="{ thumbnailUrl }"
title:text="{ title }"
template = "post">
</ListItem>

The List Item definition is where you connect your data elements to your visual elements in the template. Using the bindId, we attach the data from the collection to the property of the visual element. So we set the ImageView image property to the url specified in the model’s thumnailUrl using: img:image="{thumbnailUrl}"and the text of the Title label is set using title:text=" { title }" . When you want to reference a value from the model, all you need to do is surround the model attribute with curly braces {}.

Once that is done, you just need to update the tags in the xml file. A full List View XML is below. Just replace the XML from Jason’s example and voila!

<ListView id="postsList">
<Templates>
<ItemTemplate name="post" id="post" height='50dp'>
<ImageView bindId="img" id="thumbnail" ></ImageView>
<Label bindId="title" id="title"></Label>
</ItemTemplate>
</Templates>
<ListSection dataCollection='posts' id="postsSection">
<ListItem
img:image="{ thumbnailUrl }"
title:text="{ title }"
template = "post">
</ListItem>
</ListSection>
</ListView>