Question

我是从TableView迁移到Titanium中的ListView。列表按字母顺序分组到ListSections中的新要求之一。通过生成ListView数据，然后将每个数据作为ListSection中的字母组输出，我可以想到一种方法，我只需使用Javascript即可。

但是，我试图找到一种方法来使用带有数据绑定的钛合金，我无法在线找到任何示例，即使在Titanium Kitchen Sink中也是如此。

到目前为止，我可以在一个ListSection中获取数据输出：

    <ListView id="brandList">

        <Templates>
            <ItemTemplate name="template" id="template">
                <View>
                   <ImageView bindId="image" class="programmeImage" />
                   <Label bindId="name" class="programmeTitle" />
                   <ImageView bindId="channel" class="channelBrand" />
                </View>
            </ItemTemplate>
        </Templates>

        <ListSection dataCollection="brands">
            <ListItem template="template" name:text="{name}" image:image="{cached_image}" channel:image="{channel}" />
        </ListSection>

    </ListView>

这输出列表很好，数据绑定效果很好，但我不知道如何为每个字母组创建一个列表部分，如下面的示例图片所示。这甚至可以使用Alloy？

示例：的

enter image description here

Answer 1

您可以使用Alloy，但您必须使用在控制器中创建部分和索引。

<强>视图/ INDEX.XML

在XML中定义列表视图及其模板。我们这里没有进行数据绑定，因为我们需要在控制器中定义部分。

<Alloy>
<Window>
    <ListView id="list" defaultItemTemplate="title">
        <Templates>
            <ItemTemplate name="title" height="50">
                <Label bindId="title" class="title"/>
            </ItemTemplate>
        </Templates>
    </ListView>
</Window>
</Alloy>

<强>模型/ info.js

您需要一个模型来定义存储结构。您可以不使用id列和idAttribute - 我只是抓住了一些现有的代码，并且没有它们就没有进行测试。我正在使用一种方法扩展集合，该方法将在fetch（）上自动对集合进行排序。

exports.definition = {
config: {
    columns: {
        id: 'INTEGER PRIMARY KEY AUTOINCREMENT',
        title: 'TEXT'
    },
    adapter: {
        type: 'sql',
        collection_name: 'info',
        idAttribute: 'id'
    }
},
extendCollection: function(Collection) {
    _.extend(Collection.prototype, {
        // Implement the comparator method,
        // which is used to sort the collection
        comparator : function(name) {
            return name.get('title');
        }

    }); // end extend

    return Collection;
}
};

<强>控制器/ index.js

以下是我创建功能的方法。我遍历一个字母数组，这将是我的索引，如果有以该字母开头的名字，则为每个字母创建一个部分

var info = Alloy.createCollection('info');
info.fetch();

var sections = [];
var sectionIndexArray = [];
var letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' ];
_.each(letters, function(letter) {
    var data = info.filter(function(name) {
        var n = name.get('title');
        if(n.charAt(0).toLowerCase() === letter) {
            return name;
        }
    });
    if(data && data.length >0 ) {
        var section = Ti.UI.createListSection();
        var items = _.map(data, function(item) {
            return { title: {text: item.get('title')}};
        });

        section.setItems(items);
        sections.push(section);
        sectionIndexArray.push({index: (sections.length -1 ), title:     letter.toUpperCase() });
    }
});

$.list.sections = sections;
$.list.sectionIndexTitles = sectionIndexArray;

$.index.open();

最后，您需要填充您的收藏。对于我的测试，我将以下内容添加到我的alloy.js文件中。它本来可以在index.js。

中

var firstLadies = [
    "Adams, Abigail",
    "Adams, Louisa Catherine",
    "Arthur, Ellen Herndon",
    "Bush, Barbara",
    "Bush, Laura",
    "Carter, Rosalynn",
    "Cleveland, Frances Folsom",
    "Clinton, Hillary Rodham",
    "Coolidge, Grace Goodhue",
    "Eisenhower, Mamie Doud",
    "Fillmore, Abigail Powers",
    "Ford, Betty",
    "Garfield, Lucretia Rudolph",
    "Grant, Julia Dent",
    "Harding, Florence Kling",
    "Harrison, Anna Tuthill Symmes",
    "Harrison, Caroline Lavinia Scott",
    "Harrison, Mary Lord",
    "Hayes, Lucy Webb",
    "Hoover, Lou Henry",
    "Jackson, Rachel",
    "Johnson, Eliza McCardle",
    "Johnson, Lady Bird",
    "Kennedy, Jacqueline",
    "Lincoln, Mary Todd",
    "Madison, Dolley",
    "McKinley, Ida Saxton",
    "Nixon, Pat",
    "Obama, Michelle",
    "Pierce, Jane Means",
    "Polk, Sarah Childress",
    "Reagan, Nancy",
    "Roosevelt, Edith Kermit Carow",
    "Roosevelt, Eleanor",
    "Taft, Helen Herron",
    "Truman, Bess Wallace",
    "Van Buren, Hannah Hoes",
    "Washington, Martha",
    "Wilson, Edith Bolling Galt",
    "Wilson, Ellen Axson"
];

if (!Ti.App.Properties.hasProperty('seeded')) {
    for(var i=0,j=firstLadies.length;i<j;i++) {
        Alloy.createModel('info', { title: firstLadies[i]}).save();
    }
    Ti.App.Properties.setString('seeded', 'yes');
}

finished app

Titanium JS：是否可以使用数据绑定在ListView中按字母顺序对集合进行分组？

1 个答案: