在钛合金中将数据绑定到 Picker 的问题

Question

我需要显示来自数据库的 Picker 值。那么如何在选择器中显示动态值。

XML 代码

       <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>

型号：

     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;
    }
};

控制器

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

如何将选定的值传递给 Picker。数据未绑定到 XML 文件，我收到以下错误，

未捕获的类型错误：无法读取未定义的属性“_transform”

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

不要忘记在窗口关闭后调用$.destroy。见http://docs.appcelerator.com/titanium/latest/#!/guide/Alloy_Data_Binding

另一种解决方案：

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