Titanium JS: возможно ли сгруппировать коллекцию по алфавиту в ListView с помощью привязки данных?

Я перехожу с TableView на ListView в Titanium. Одно из новых требований состоит в том, что список сгруппирован по алфавиту в ListSections. Я могу придумать способ сделать это, используя только Javascript, путем создания данных ListView и последующего вывода каждого из них в виде группы по алфавиту в ListSection.

Однако я пытаюсь найти способ сделать это, используя титановый сплав с привязкой данных, и я не могу найти никаких примеров в Интернете, даже в титановой кухонной раковине.

Вот что у меня есть до сих пор, я могу получить вывод данных в одном 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?

Пример:

введите здесь описание изображения


person shrewdbeans    schedule 24.04.2014    source источник


Ответы (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');
}

готовое приложение

person skypanther    schedule 24.04.2014
comment
Здорово! Это именно то, что мне было нужно! :) - person yeelan; 07.10.2014