如何在创建后引用没有 ID、没有 class 的 Tabrisjs 小部件

Question

这是一个使用 forEach 循环创建小部件的示例（适用于 playground）。 我使用 index 为小部件创建唯一 ID：

id: 'txiFirstName' + (index + 1)

我知道我可以使用 id 和 类 更改小部件的属性 很有用。

是否可以在没有 .apply 的情况下引用小部件 ？ 类似于：

txiFirstName[1] //which doesn’t work

谢谢，

代码 (Tabrisjs 2.5)

const {Button, CheckBox, TextInput, TextView, ui} = require('tabris')

let persons = [
  { 'firstName': 'Bob', 'lastName': 'Smith', 'member': true },
  { 'firstName': 'Bill', 'lastName': 'Jones', 'member': false },
  { 'firstName': 'Fred', 'lastName': 'Picard', 'member': true }
]

let d = new Date()

persons.forEach((person, index) => {
  console.log(person.firstName + ' ' + person.lastName + ' Member: ' + person.member)

  let txiFirstName = new TextInput({
    id: 'txiFirstName' + (index + 1),
    left: 20, top: 'prev() 20', width: 80,
    text: person.firstName
  }).appendTo(ui.contentView)

  let txiLastName = new TextInput({
    id: 'txiLastName' + (index + 1),
    left: 110, top: 'prev() -20', width: 100,
    text: person.lastName
  }).appendTo(ui.contentView)

  let chkMember = new CheckBox({
    id: 'chkMember' + (index + 1),
    class: 'chkMember',
    right: 5, top: 'prev() -20',
    checked: person.member
  }).appendTo(ui.contentView)

  let txvDate = new TextView({
    class: 'txvDate',
    right: 5, top: 'prev()',
    text: d
  }).appendTo(ui.contentView)
}) // end forEach

let btnNotMember = new Button({
  centerX: 0, top: 'prev() 20',
  text: '  Make all persons non-members'
})
  .on('select', () => {
    ui.contentView.apply({'.chkMember': {checked: false}})
  }).appendTo(ui.contentView)

let btnMember1 = new Button({
  centerX: 0, top: 'prev() 20',
  text: 'Change member 1 to Sherlock'
})
    .on('select', () => {
      ui.contentView.apply({'#txiFirstName1': {text: 'Sherlock'}})
    }).appendTo(ui.contentView)

let btnUpdateDate = new Button({
  centerX: 0, top: 'prev() 20',
  text: 'Update date'
}).on('select', () => {
  let d = new Date()
  ui.contentView.apply({'.txvDate': {text: d}})
}).appendTo(ui.contentView)

屏幕截图iOS

Answer 1

这取决于您如何构建代码。

您的示例展示了您遍历数组以创建列表布局。如果布局最终比屏幕上可以容纳的高度高，则可以通过切换到 CollectionView 来提高性能。这是因为 CollectionView 将只渲染需要在屏幕上显示的内容，而绘制每个元素会将整个布局保存在内存中。因此，如果您的 persons 数组会变大，我会将其切换为 CollectionView 并且听起来您已经拥有了设置样式的代码。

---

所有小部件都可以从 JavaScript 变量中引用，如下所示：

let square = new Composite({
    centerX: 0, centerY: 0,
    height: 25,
    width: 25,
}).appendTo(ui.contentView);

square.background = 'blue';

---

在您的示例中，此代码：

txiFirstName[1]

将不起作用，因为：

1. txiFirstName 是 tabris.TextInput 类型并且不是 数组
2. txiFirstName 在箭头函数内用 let 声明，因此仅在该循环*内的范围内。其他任何地方都没有定义。

看起来您已经掌握了底部的三个按钮。您可以使用分配给小部件的 ID 或 class 直接引用小部件。如果出于某种原因您不想为它们分配 ID，则需要将元素弹出到范围适当的变量中：即在循环内使用 var 到 hoist 或在循环外声明它。

*具体来说，它只在该循环迭代期间的范围内。循环的下一次迭代将无法访问在上一次迭代期间设置的任何变量。