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

时间:2014-09-23 09:27:03

标签: backbone.js titanium titanium-mobile titanium-alloy titanium-modules

我需要显示数据库中的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文件,我收到以下错误,

未捕获的TypeError:无法读取未定义的属性“_transform” enter image description here

1 个答案:

答案 0 :(得分:2)

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