Alloy Data Binding with ListViews — Part 2 - Full Example

index.js

function updateListView(records) {
	if (records === 0) {
		var item = $.postsList.sections[0].getItemAt(0);
		item.template = 'noDataTemplate';
		$.postsList.sections[0].updateItemAt(0, item);
	} else {
		var item = $.postsList.sections[0].getItemAt(0);
		item.template = 'zero';
		$.postsList.sections[0].updateItemAt(0, item);
	}
}

Alloy.Collections.posts.fetch({
	success : function(col) {
		updateListView(col.models.length);
	}
});

Alloy.Collections.posts.on("remove add", function(e) {
	updateListView(Alloy.Collections.posts.length);
});

function openPost(e) {
	var rowItem = $.postsList.sections[e.sectionIndex].getItemAt(e.itemIndex);
	alert(rowItem);
}

function delRec() {
	if (Alloy.Collections.posts.length > 0) {
		Alloy.Collections.posts.at(0).destroy();	
	}
	
}

function addRec() {
	Alloy.Collections.posts.add([{
		thumbailUrl : "http://someimage",
		title : "New Model"
	}]);
}

//call this function onClose() because otherwise, data binding will leak memory.
function reset() {
	$.destroy();
}

$.win.open();

index.tss

".thumbnail" : {
  width: 30,
  height: 30,
  left: 10
}
".title" : {
  width: Ti.UI.SIZE,
  height: Ti.UI.SIZE,
  left: 60
},
"Label" : {
	color : "#000"
}

index.xml

<Alloy>
	<!--<Collection src="posts" instance="true" id="posts"></Collection>-->
	<Window top="50" layout="vertical" modal="true" id="win" title='View Posts' onClose="reset" backgroundColor="white">
		<Button title="Add Rec" onClick="addRec"></Button>
		<Button title="Del Rec" onClick="delRec"></Button>
		<ListView id="postsList" onItemclick="openPost"  >
			<Templates>
				<ItemTemplate name="post" id="post" height='50dp'>
					<ImageView bindId="img" id="thumbnail" ></ImageView>
					<Label bindId="title" id="title"></Label>
				</ItemTemplate>
				<ItemTemplate name="noDataTemplate" height='80dp'>
					<Label bindId="noData" id="nodata" text="No Posts"></Label>
				</ItemTemplate>
				<ItemTemplate name="zero" height="0"></ItemTemplate>
			</Templates>
			<ListSection id='noData'>
				<ListItem template="noDataTemplate"></ListItem>
			</ListSection>
			<ListSection dataCollection='posts' id="postsSection">
				<ListItem
					img:image="{ thumbnailUrl }"
					title:text="{ title }"
					myID = '{title}'
					accessoryType="Titanium.UI.LIST_ACCESSORY_TYPE_DISCLOSURE"
					template = "post">
				</ListItem>
			</ListSection>
		</ListView>
	</Window>
</Alloy>