Issue with data biding into Picker in Titanium Alloy - backbone.js

Question

I need to display the Picker values from Database. So How can I display the dynamic values in picker.
XML code
<Alloy>
<Collection src="UserLanguage"/>
<Window class="container" onClose="cleanup">
<Picker class="picker">
<PickerColumn dataCollection="UserLanguage" dataTransform="transformFunction">
<PickerRow title="{LanguageName}"/>
</PickerColumn>
</Picker>
<!--<Label id="label"></Label>-->
</Window>
</Alloy>
Model:
var moment = require('alloy/moment');
exports.definition = {
config : {
"columns": {
"id":"text",
"LanguageName":"text"
},
"adapter": {
"type": "sql",
"collection_name": "UserLanguage"
}
},
extendModel: function(Model) {
_.extend(Model.prototype, {
});
return Model;
},
extendCollection: function(Collection) {
_.extend(Collection.prototype, {
});
return Collection;
}
};
Controller
var moment = require('alloy/moment');
var userlang = Alloy.Collections.UserLanguage;
var task = Alloy.createModel('UserLanguage', {
id : '1',
LanguageName : 'English'
});
task.save();
userlang && userlang.fetch();
function transformFunction(model) {
var transform = model.toJSON();
transform.LanguageName = transform.LanguageName ;
return transform;
}
$.index.open();
function cleanup() {
$.destroy();
}
tss:
".container": {
backgroundColor:"black"
},
".picker": {
width: '90%',
top: '25dp'
}
Alloy.js
Alloy.Collections.UserLanguage = Alloy.createCollection('UserLanguage');
How can I pass the selected values in to Picker. The data is not binding in to the XML file, I'm getting the following error,
Uncaught TypeError: cannot read property '_transform' of undefined

Answer 1

index.xml
<Alloy>
<Collection src="UserLanguage"/>
<Window>
<Picker id="countryPicker" class="picker">
<PickerColumn id="column1" dataCollection="UserLanguage">
<PickerRow title="{LanguageName}"/>
</PickerColumn>
</Picker>
</Window>
</Alloy>
index.js
Alloy.Collections.UserLanguage.fetch();
$.index.open();
Don't forget to call $.destroy after window is closed. See http://docs.appcelerator.com/titanium/latest/#!/guide/Alloy_Data_Binding
Another solution:
index.xml
<Alloy>
<Collection src="UserLanguage"/>
<Window>
<Picker id="picker"/>
</Window>
</Alloy>
index.js
var userLanguage = Alloy.Collections.UserLanguage;
userLanguage.on("reset", function() {
var column = Ti.UI.createPickerColumn();
this.each(function(model) {
var row = Ti.UI.createPickerRow({
title: model.get("LanguageName");
});
column.addRow(row);
});
$.picker.columns = [column];
});
userLanguage.fetch();
$.index.open();