Добавление нескольких TextView в CollectionView в Tabrisjs

Question

Я могу легко добавлять виджеты в CollectionView, но не могу добавить больше одного типа виджетов. Я пытаюсь добавить 2 TextView. Вот что я получил до сих пор: only выводит firstName дважды. ( это работает на детской площадке )

Кроме того, возможно ли добавить события к каждому TextView? лайк: .on('tap', () => {

Я вижу, как работает .on('select', в представлении коллекции, но я хочу добавить событие к каждому отдельному TextView

.

Спасибо.

// Create a collection view, initialize its cells and fill it with items
const {CollectionView, Composite, ImageView, TextView, ui} = require('tabris');

let people = [
  ['Bob', 'Smith',],
  ['Fred', 'Jones'],
  ['James', 'Mackay'],
].map(([firstName, lastName]) => ({firstName, lastName}));

new CollectionView({
  left: 0, top: 0, right: 0, bottom: 0,
  itemCount: people.length,
  cellHeight: 56,

  createCell: () => {
    let cell = new Composite();

    new TextView({
      left: 30, top: 10,
      alignment: 'left'
    })
    .appendTo(cell);

    let txvLastName = new TextView({
      left: 50, top: 25,
      alignment: 'right'
    })
    .appendTo(cell);
    return cell;
  },
  updateCell: (cell, index) => {
    let person = people[index];
    cell.apply({
      TextView: {text: person.firstName},
      txvLastName: {text: person.lastName},
    });
  }
}).on('select', ({index}) => console.log('selected', people[index].firstName))
  .appendTo(ui.contentView);

Answer 1

Метод apply использует селектор виджетов, который работает аналогично селекторам CSS и документирован по вышеуказанной ссылке. Вы ссылаетесь на переменную JavaScript, которая не поддерживается и не входит в область действия функции обратного вызова updateCell.

Я бы обновил ваш обратный вызов createCell, чтобы у каждого элемента был отдельный класс , и указывал бы это в вашем обратном вызове updateCell:

createCell: () => {
  let cell = new Composite();

  new TextView({
    left: 30, top: 10,
    class: 'firstName',
    alignment: 'left'
  }).appendTo(cell);

  new TextView({
    left: 50, top: 25,
    class: 'lastName',
    alignment: 'right'
  }).appendTo(cell);
  return cell;
},
updateCell: (cell, index) => {
  let person = people[index];
  cell.apply({
    '.firstName': {text: person.firstName},
    '.lastName': {text: person.lastName},
  });
}