如何使用带有 Appcelerator 的 Alloy 动态填充 Picker？

Question

有没有办法动态填充选择器？这适用于选项对话框：

view.xml：

<OptionDialog id="distributionPointsOptionDialog">
 <Options>
    <Option id="{dp}"></Option> 
 </Options>
</OptionDialog>

controller.js：

var dp = [];
for (var j in _data) {
    if (_data[j].country == country) {
        dp.push(_data[j].city + "-" + _data[j].dp_name);
        }
}
$.distributionPointsOptionDialog.options = dp;

有没有办法为多列选择器做同样的事情？我尝试填充单列选择器，但没有成功。

controller.js：

var fs = Ti.Filesystem;
var installedFonts = fs.getFile(fs.resourcesDirectory+ "/fonts").getDirectoryListing();
Ti.API.info("list of resourcesDirectory fonts: " + JSON.stringify(installedFonts));
var fonts = [];
for (var j in installedFonts) {
    fonts.push(installedFonts[j]);
}
$.testPicker.column = fonts;

views.xml：

<Picker id="testPicker" selectionIndicator="true" height="Ti.UI.SIZE" width="70%" visible="true" zIndex="200" useSpinner="true">
<Column>
   <Row title="{fonts}"></Row>
</Column>
</Picker>

这会导致错误：

ERROR] :      message = "undefined is not an object (evaluating '$model.__transform')";

Answer 1

您的实现存在一些错误。

1. useSpinner 属性已被弃用，因此请从您的代码中删除它。
2. 您实现 Options & Pickers 的方式是一个 Alloy-Model 绑定过程。
3. 对于动态选项，您可以简单地使用以下代码：

<OptionDialog id="distributionPointsOptionDialog"></OptionDialog> $.distributionPointsOptionDialog.options = ['Helvetica', 'Arial', 'Times New Roman'];

4. <Option id="{dp}"></Option> - 此语法用于模型数据绑定

5. 对于 Picker，使用以下代码：

var fonts = []; fonts[0]=Ti.UI.createPickerRow({title:'Helvetica'}); fonts[1]=Ti.UI.createPickerRow({title:'Arial'}); fonts[2]=Ti.UI.createPickerRow({title:'Times New Roman'}); fonts[3]=Ti.UI.createPickerRow({title:'Georgia'}); $.testPicker.add(fonts);

或

var column = Ti.UI.createPickerColumn(); column.add( Ti.UI.createPickerRow({ title: 'Helvetica' }) ); column.add( Ti.UI.createPickerRow({ title: 'Arial' }) ); column.add( Ti.UI.createPickerRow({ title: 'Times New Roman' }) ); column.add( Ti.UI.createPickerRow({ title: 'Georgia' }) ); $.testPicker.columns = [column];

对于 Pickers，简而言之，你可以使用 $.testPicker.add() 方法，也可以像这样设置列 $.testPicker.columns = [column1, column2,第 1 列，...]

在此处阅读更多信息How to add Columns or Rows in Pickers

或

How to add column(s) in Picker