0

这是一个使用 forEach 循环创建小部件的示例（在操场上工作）。我用来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 在此处输入图像描述

4

1 回答 1

1

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

您的示例显示您循环遍历数组以创建列表布局。如果布局最终比屏幕所能容纳的要高，则切换到CollectionView. 这是因为它CollectionView只会渲染屏幕上需要显示的内容，而绘制每个元素会将整个布局保留在内存中。因此，如果您的persons数组要变大，我会将其切换为 a 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. txiFirstNamelet在箭头函数内声明，因此仅在该循环*内的范围内。其他地方没有定义。

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

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

于 2018-07-17T18:28:19.387 回答