Я думаю, что я знаю, что вам нужно, в этом случае, так как вы хотите генерировать каждый элемент динамически (например, сценарий, когда вы сначала открываете свое окно с помощью ListView и делаете вызов API для получения удаленных данных и заполнения ListView с указанными данными), вам нужно будет использовать ItemTemplates, объявленные в своих собственных контроллерах.
Вы просто создать новый контроллер, как нормальные и в представлении XML вы кладете ItemTemplate:
<Alloy>
<ItemTemplate name="template" id="template">
<View class="item-container">
<ImageView bindId="pic" class="pic"/>
<Label bindId="username" class="username"/>
</View>
</ItemTemplate>
</Alloy>
В вашем TSS вы положили все стили, упомянутым к каждому элементу в шаблоне, так как вы Ждете» т предоставить пример TSS я не могу сказать, что ваши свойства стиля, но в TSS вам нужно определить стиль шаблона, например, позволяет сказать что-то вроде:
"#template": // this is the id of your template in your xml
{
width : Ti.UI.FILL,
height : '44dp',
backgroundColor : '#FFFFFF'
}
чтобы заполнить ваш ListView с ListItems динамически, вам нужно будет сделать что-то подобное в своем обратный вызов из вашего API:
function displayListItems(items)
{
var itemCollection = [];
for(var i=0; i < items.length; i++)
{
var tmp = {
pic : {
image : items[i].image
},
username : {
text : items[i].text
},
template : 'template' // here goes the name of the template in your xml, **do not confuse name with id, both are different and using one doesn't replace the other**
};
itemCollection.push(tmp);
}
$.ListView.sections[0].items = itemCollection;
}
И воила, вы получаете динамический список ListView. Теперь вы можете сделать несколько дополнительных шагов.
В контроллере шаблона вы можете оставить это поле пустым, так как ListView может управлять событие itemclick, но если вы хотите различные действия, которые имеют место, когда определенный элемент в ListItem для запуска, необходимо указать функции вызывается в вашем контроллере для каждого элемента.
Например позволяет сказать, что вы прошли свойство dataInfo к вашему ImageView и вашей этикетки в шаблоне, как это:
function displayListItems(items)
{
var itemCollection = [];
for(var i=0; i < items.length; i++)
{
var tmp = {
pic : {
image : items[i].image
dataInfo : items[i].fooA //lets pass to the ImageView the object fooA
},
username : {
text : items[i].text,
dataInfo : items[i].fooB //lets pass to the Label the object fooB
},
template : 'template' // here goes the name of the template in your xml, **do not confuse name with id, both are different and using one doesn't replace the other**
};
itemCollection.push(tmp);
}
$.ListView.sections[0].items = itemCollection;
}
И вы хотите ImageView и этикетки для вызова различных функций, вы будете необходимо изменить XML, как это:
<Alloy>
<ItemTemplate name="template" id="template">
<View class="item-container">
<ImageView bindId="pic" class="pic" onClick="imageFunction"/> <!-- added onClick event -->
<Label bindId="username" class="username" onClick="labelFunction"/> <!-- added onClick event -->
</View>
</ItemTemplate>
</Alloy>
в контроллере вы объявите каждую функцию:
function imageFunction(e)
{
var dataInfo;
if(Ti.Platform.osname === 'android')
{
var item = e.section.items[e.itemIndex];
var bindObject = item[e.bindId];
dataInfo = bindObject.fooA;
}
else
{
dataInfo = e.source.fooA;
}
}
function labelFunction(e)
{
var dataInfo;
if(Ti.Platform.osname === 'android')
{
var item = e.section.items[e.itemIndex];
var bindObject = item[e.bindId];
dataInfo = bindObject.fooB;
}
else
{
dataInfo = e.source.fooB;
}
}
Теперь вы можете спросить, почему нужно проверить имя оперативной системы, так что Android и iOS получают разные объекты, даже если вы используете ту же функцию. В прошивке любой недвижимости, которые Вы передаете на источник события можно получить непосредственно e.source.propertyName в Android вам нужно получить доступ к элементу в e.section использования e.itemIndex, после того, что вы получить представление внутри элемента связанным с ним связанным с ним связанным с ним e.bindId.
Одним из самых больших ограничений для ListItems является обновление представлений внутри ListItem, для этого вам необходимо обновить весь элемент, который вы хотите изменить визуально, и назначить ему другой шаблон, но скорость, с которой это делается. не сможет заметить какого-либо отставания, серьезно, производительность ListView - это нечто иное, в отличие от ScrollView, и не будем говорить о ужасном и ошибочном TableView.
Предупреждение, что в Titanium SDK 3.2.0.GA есть ошибка в ItemTemplates, которая вызывает просмотр внутри дочерних представлений в шаблоне, чтобы изменить их zIndex на Android без возможности его контролировать. Существуют два известных экземпляра для это: Если вы не используете макет в дочернем представлении, это может привести к тому, что представление, которое должно отображаться под другим видом, появится поверх него.
Если вы используете вертикальную компоновку в дочернем виде: это может привести к скремблированию позиций каждого вида, это связано с тем, что zIndex изменяет порядок отображения в вертикальном макете.
Эта ошибка запускается случайным образом, и команда Appcelerator не много работала над ней, проверьте билет JIRA здесь TIMOB-16704.
Этого можно избежать, если вы используете шаблон с фиксированными позициями и убедитесь, что нет надписи поверх другого, также помните, что нет вертикальных макетов, не проверял это горизонтально, но лично я стараюсь избегать горизонтальных макеты, так как есть и другие ошибки, связанные с ним при использовании в scrollviews, нормальных взглядов и т.д.
EDIT
Еще одна вещь, которую вы можете сделать с этим назначить другой взгляд на элементы, которые вы оказываете , у вас есть варианты:
- Применение стилей при объявлении ListItem.
- Чтобы применить различные макеты к каждому элементу ListItem в зависимости от ряда условий.
Для первого варианта вам нужно опустить или переписать декларацию определенных свойств в шаблоне:
Например, давайте использовать другой цвет фона, где свойство fooA существует и если он другого цвета не имеет:
function displayListItems(items)
{
var itemCollection = [];
for(var i=0; i < items.length; i++)
{
var properties = {};
if(typeof items[i].fooA !== 'undefined')
{
properties = {
backgroundColor : 'red'
};
}
else
{
properties = {
backgroundColor : 'blue'
};
}
var tmp = {
properties : properties, // properties for the template
pic : {
image : items[i].image
dataInfo : items[i].fooA //lets pass to the ImageView the object fooA
},
username : {
text : items[i].text,
dataInfo : items[i].fooB //lets pass to the Label the object fooB
},
template : 'template' // here goes the name of the template in your xml, **do not confuse name with id, both are different and using one doesn't replace the other**
};
itemCollection.push(tmp);
}
$.ListView.sections[0].items = itemCollection;
}
Вы можете изменить ширину, высоту, backgroundColor, расположение и т. д. в соответствии с вашими потребностями.
Теперь, если вы хотите, чтобы каждый элемент имел четкий вид (что означает разные виды для отображения различного контента) и, возможно, другое поведение, вам нужно использовать разные шаблоны.
Это может показаться назойливым, но это не так, шаблоны быстро создаются после того, как вы привыкнете к ним, что не займет много времени, может быть, еще один downer может быть, если вы хотите 11 разных взглядов, это может означать, что вам понадобится 11 шаблонов, но это крайний случай, и вы можете пересмотреть свой интерфейс, если вы имеете дело с этим множеством шаблонов.
Несмотря на то что ограничительные, шаблоны товаров предлагают широкий спектр возможностей для вас, малое воображение является единственным ингредиентом, необходимым для выявления всех возможностей.
EDIT 2
я, наконец, понял, в чем вы проблема, если вам нужно создать шаблон, содержание которого меняется в зависимости от топора переменной, то вы должны попробовать объявить шаблон на контроллере ListView, но это должно быть сделано до открытия окна были вы будете показывать ListView, так как шаблоны свойства можно установить только на создании, вы должны добавить что-то вроде:
function createTemplate(items)
{
var template = {};
for(var i=0; i < items.length; i++)
{
template.childTemplates = [];
for(var j=0; items[i].tags.length; j++)
{
var childTemplate = {
type: 'Ti.UI.Label',
bindId: 'tag' + j,
properties : {
width : Ti.UI.SIZE, // Here you define how your style
height : Ti.UI.SIZE,
font : {
fontSize : '18dp'
},
text : items[i].tags[j].text // you can pass the text here or if you want to on the later for
}
};
template.childTemplates.push(childTemplate);
}
}
// After this you should end up with a template with as many childTemplates as tags each item have, so send the template to the controller with your ListView
Alloy.createController('ListViewWindow', {customTemplate: template});
}
И в контроллере ListView вы retriev е шаблон:
var args = arguments[0] || {};
var template = args.customTemplate;
$.ListView.templates = {'customTemplate' : template}; // before any window open call, do this
Это должно добавить шаблон к вашему ListView, вы можете также создать ListView в контроллере вместо того, чтобы объявить его в Alloy XML, используйте тот, который соответствует вашим потребностям больше.
Спасибо Nando, но я не думаю, что это сработает, потому что вы объявляете один Ti.UI.Label для тегов. Теги представляют собой массив строк, каждая строка нуждается в собственном Ti.UI.Label. Поскольку вы должны объявлять дочерние шаблоны, прежде чем создавать экземпляр ListView, я не верю, что у вас есть возможность добавлять переменное число Ti.UI.Labels в зависимости от array.length – TheBigC