在 Tabrisjs 中将多个 TextView 添加到 CollectionView

Question

我可以轻松地将小部​​件添加到 CollectionView，但我似乎无法添加多个小部件类型。我正在尝试添加 2 个 TextView。这是我到目前为止得到的结果，它仅输出了 firstName 两次。 （这在 Playground 中运行）

另外，是否可以向每个 TextView 添加事件？喜欢： .on('tap', () => {

我确实看到 .on('select',在 Collection View 上的工作方式，但我想将事件添加到每个 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 方法采用 Widget 选择器，其工作方式类似于 CSS 选择器，并在上述链接中记录。您正在引用一个 JavaScript 变量，该变量不受支持且不在 updateCell 回调函数的范围内。

我会更新您的 createCell 回调，以便每个元素都有一个不同的 class 并在您的 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},
  });
}