titanium listView动态数据绑定

时间:2016-01-27 22:28:03

标签: listview data-binding titanium-alloy

sdk: 3.5.1

我不熟悉listView机制。我正在尝试了解如何将JSON数据值应用于项模板的绑定属性。

我从映射数据开始

//example 
var data = ({data:json-data, index:'label'});

var _data = _.map(data, function(item, index) {
    return {
        properties: {
            categoryLabel: index,
            data: item

        }
    }
});

然后我想将它绑定到我的列表

$.activityDetailsList.sections[0].setItems(_data);

在我看来,我有

<ListView defaultItemTemplate="activityDetailsListItemTemplate" id="activityDetailsList">
  <Templates>
    <ItemTemplate name="activityDetailsListItemTemplate">
      <Label bindId="categoryLabel" class="rowTitle" id="categoryLabel"/>
      <View bindId="rightSpacer" id="rightSpacer">
        <ImageView bindId="arrowImage" id="arrowImage"/>
      </View>
    </ItemTemplate>
  </Templates>
 <ListSection id="activityDetailsListSection">
    <ListItem template='activityDetailsListItemTemplate'/>
  </ListSection>
</ListView>

当我遍历五个元素时,我回来的都是带有相应箭头的空白行。

enter image description here

以下是我的问题:如何显示categoryLabel文本值?我是否必须在模板中定义它?这部分对我来说并不清楚。我认为简单地将数据绑定到模板就足够了。显然不是。

1 个答案:

答案 0 :(得分:0)

最终对我有用的是什么:

查看xml

<Alloy>
    <Window class="container">
        <ListView defaultItemTemplate="dailyActivitiesTemplate" id="activityList" top="30">
            <Templates>
                <ItemTemplate name="dailyActivitiesTemplate">
                    <View id="dailyActivities">
                        <View class="row" id="fundRow">
                            <Label class="rowTitle" id="fund" text="Fund: "/>
                            <Label bindId="fund" class="rowValue" id="fund"/>
                        </View>
                        <View class="row" id="amountRow">
                            <Label class="rowTitle" id="amount" text="Amount: "/>
                            <Label bindId="amount" class="rowValue" id="amount"/>
                        </View>
                        <View class="row" id="unitsRow">
                            <Label class="rowTitle" id="units" text="Units: "/>
                            <Label bindId="units" class="rowValue" id="units"/>
                        </View>
                        <View class="row" id="sourceRow">
                            <Label class="rowTitle" id="source" text="Source: "/>
                            <Label bindId="source" class="rowValue" id="source"/>
                        </View>
                        <View class="row" id="unitValueRow">
                            <Label class="rowTitle" id="unitValue" text="Unit Value: "/>
                            <Label bindId="unitValue" class="rowValue" id="unitValue"/>
                        </View>
                    </View>
                </ItemTemplate>
            </Templates>
            <ListSection>
                <ListItem template="dailyActivitiesTemplate"/>
            </ListSection>
        </ListView>
    </Window>
</Alloy>

控制器:

var items = [];

_.map(_.first(activities), function(element, key) {

    if (moment(new Date(key)).isValid()) {

        _.each(element, function(item, key) {
            items.push({
                fund: {
                    text: item.fund
                },
                amount: {
                    text: item.amount
                },
                units: {
                    text: item.units
                },
                source: {
                    text: item.source
                },
                unitValue: {
                    text: item.unitValue
                }
            });

        });
    }

});
$.activityList.sections[0].setItems(items);

对我而言,重点是我不需要properties:{}父母。那让我困惑。现在我在视图中有数据,我只需要用TSS文件设置样式。