Issue with data biding into Picker in Titanium Alloy

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();