Skip to content

Instantly share code, notes, and snippets.

@Topener
Last active June 13, 2019 06:53
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Topener/7acac49b7c940641ffba to your computer and use it in GitHub Desktop.
Save Topener/7acac49b7c940641ffba to your computer and use it in GitHub Desktop.
Simple example how to work with collections data-binding in Alloy, including filter, sorting, data transform and manual refresh
$.Departures.comparator = sortDepartures;
$.Departures.reset([]);
var sortByName = true;
function transformDeparture(model){
if (!model || !model.get('destination')){
console.warn(model.toJSON());
}
var time = require('Date').formatTime(model.get('time'));
return {
title: time + ' - ' + model.get('destination').name,
departureId: model.get('id')
};
}
function switchSort(){
sortByName = !sortByName;
$.Departures.sort();
}
function filterDelayed(collection){
var showModels = [];
collection.each(function(model){
if (sortByName){
if (model.get('delay') > 0){
showModels.push(model);
}
} else {
showModels.push(model);
}
});
return showModels;
}
function filterAmsterdam(collection){
var showModels = [];
collection.each(function(model){
if (model.get('destination').code == 'ASD'){
showModels.push(model);
}
});
return showModels;
}
function sortDepartures(a,b){
if (!a || !b || !a.get('destination') || !b.get('destination')){
return 0;
}
if (sortByName){
if (a.get('destination').name < b.get('destination').name) return -1;
if (a.get('destination').name > b.get('destination').name) return 1;
return 0;
} else {
if (a.get('time') < b.get('time')) return -1;
if (a.get('time') > b.get('time')) return 1;
return 0;
}
}
function itemClick(e){
var model = $.Departures.get(e.itemId);
// do whatever you want with the model here
}
function updateCollectionTimes(){
getTimes(function(data){
var deps = data.times;
var depModels = [];
_.each(deps, function(dep){
depModels.push(Alloy.createModel('Departure',dep));
});
$.Departures.reset(depModels);
$.ptr.hide();
});
}
updateCollectionTimes();
function getTimes(cb){
var url = "http://spoorbaan.com/API/station/shl";
var xhr = Ti.Network.createHTTPClient({
onload: function(e) {
cb(JSON.parse(this.responseText));
},
onerror: function(e) {
Ti.API.debug(e.error);
alert('error');
},
timeout:5000
});
xhr.open("GET", url);
xhr.send();
}
$.index.open();
<Alloy>
<Collection src="Departure" instance="true" id="Departures"></Collection>
<NavigationWindow>
<Window>
<RightNavButton>
<Label id="Switch" onClick="switchSort" text="Switch" />
</RightNavButton>
<Widget id="ptr" src="nl.fokkezb.pullToRefresh" onRelease="updateCollectionTimes">
<ListView onItemclick="itemClick">
<ListSection
dataCollection="$.Departures"
dataTransform="transformDeparture"
dataFunction="refreshListView1"
dataFilter="filterDelayed"
>
<ListItem
title="{title}"
departureId="{departureId}"
itemId="{departureId}"
/>
</ListSection>
<ListSection
dataCollection="$.Departures"
dataTransform="transformDeparture"
dataFunction="refreshListView"
dataFilter="filterAmsterdam"
headerTitle="Amsterdam"
>
<ListItem
title="{title}"
departureId="{departureId}"
itemId="{departureId}"
/> </ListSection>
</ListView>
</Widget>
</Window>
</NavigationWindow>
</Alloy>
@hussasad
Copy link

what does the dataFunction do? I don't see any references to refreshListView

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment