Вы можете использовать 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');
}
![готовое приложение](https://i.stack.imgur.com/UX8T9.png)
person
skypanther
schedule
24.04.2014