如何将小部件名称传递给 Tabris 中的函数？答案

【问题标题】：How to pass a widget name to a function in Tabris?如何将小部件名称传递给 Tabris 中的函数？
【发布时间】：2018-08-02 12:53:14
【问题描述】：

我可以将小部件的name 传递给function 以创建标签吗？

类似

let widgetName = new Tab({ ...

为什么？

我需要放很多不同的每个 tab 内创建的小部件，即：.appendTo(tabCart)

注意：当我创建一个函数 createTextViews() 时，我分配了一个唯一的

id: txvName +(index)

（将array 传递给createTextView()，然后是forEach 循环）

并且可以通过 id 寻址每个TextView，效果很好。

示例代码：（适用于 /playground）

const {Tab, TabFolder, TextView, ui} = require('tabris')

let tabFolder = new TabFolder({
  left: 0, top: 0, right: 0, bottom: 0
}).appendTo(ui.contentView)

createTab('tabCart', 'Cart')
createTab('tabPay', 'Pay')
createTab('tabStats', 'Stats')

function createTab (widgetName, title) {
// let widgetName = new Tab({  //fails, can't assign twice, wrong type anyways
  let tab = new Tab({
    title: title
  }).appendTo(tabFolder)

  new TextView({
    centerX: 0, centerY: 0,
    text: 'Content of Tab ' + title
  }).appendTo(tab)
}

【问题讨论】：

我不确定你将名称传递给函数是什么意思。您是否尝试将生成的Tab 分配给createTab 函数范围之外的变量？如果是这样，真正做到这一点的唯一方法是使用var 来提升它们，但它们都是相同的参考。相反，在createTab 的底部，您可以return tab; 并将每个函数调用的响应分配给一个变量，例如let cartTab = createTab(/* ... */);

标签： javascript widget tabris

【解决方案1】：

感谢饼干大师。您对return tab 的建议是我希望的解决方案。
以下是我将如何在我的应用程序中使用它的一个小示例：

const {Button, ImageView, Tab, TabFolder, TextView, ui} = require('tabris')

let tabFolder = new TabFolder({
  left: 0, top: 0, right: 0, bottom: 0
}).appendTo(ui.contentView)

let tabCart = createTab('Cart', 'text-color')
new Button({
  centerX: 0, top: 60,
  text: 'Change textColor / remove tabPay'
}).on('select', () => {
  tabFolder.find('.text-color').set('textColor', 'red')
  tabPay.visible = false
  tabItems.title = 'Items (1)'
}).appendTo(tabCart)

let tabItems = createTab('items', 'text-color')
new ImageView({
  centerX: 0, top: 0,
  image: 'https://raw.githubusercontent.com/eclipsesource/tabris-js/master/snippets/resources/target_200.png'
}).appendTo(tabItems)

let tabPay = createTab('Pay', 'text-color')

function createTab (title, tclass) {
  let tab = new Tab({
    title: title
  }).appendTo(tabFolder)

  new TextView({
    centerX: 0, centerY: 0,
    text: 'Content of Tab ' + title,
    class: tclass
  }).appendTo(tab)
  return tab
}

【讨论】：