listview - 钛JS : Is it possible to group a collection alphabetically in a ListView using data binding?

Question

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

但是，我正在尝试找到一种使用钛合金和数据绑定(bind)来实现此目的的方法，但我在网上找不到任何示例，即使在钛厨房水槽中也是如此。

这是我到目前为止所拥有的，我可以在一个 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>

这会很好地输出列表，并且数据绑定(bind)效果很好，但我不知道如何为每个字母组创建列表部分，如下面的示例图片所示。使用合金这甚至可能吗？

示例:

Answer 1

您可以使用 Alloy 来实现此目的，但您必须在 Controller 中使用创建部分和索引。

views/index.xml

在 XML 中定义 ListView 及其模板。我们在这里不进行数据绑定(bind)，因为我们需要在 Controller 中定义部分。

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

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

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

最后，您需要填充您的集合。为了进行测试，我将以下内容添加到了loyal.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');
}