javascript - 如何在创建后引用没有 id、没有类的 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 或类直接引用小部件。如果由于某种原因您不想为它们分配 ID，则需要将元素弹出到作用域正确的变量中:即在循环内使用 var 到 hoist它或在循环之外声明它。

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