javascript - 如何从另一个js文件使用setActiveTab

Question

我正在尝试使用TabGroup，然后我想使用另一个js文件中的函数setActiveTab，但出现错误。

当我点击第三个选项卡中的button3时，它显示tabGroup未定义。

这是在 app.js 中

var tabGroup = Titanium.UI.createTabGroup()

var window1 = Titanium.UI.createWindow({
    backgroundColor: 'cyan'
})
var window2 = Titanium.UI.createWindow({
    backgroundColor: 'magenta'
})
var window3 = Titanium.UI.createWindow({
    backgroundColor: 'yellow',
    url: 'thirdTab.js'
})

var tab1 = Titanium.UI.createTab({
    //icon
    title: 'First tab',
    window: window1
})
var tab2 = Titanium.UI.createTab({
    title: 'Second tab',
    window: window2
})
var tab3 = Titanium.UI.createTab({
    title: 'Third tab',
    window: window3
})

tabGroup.addTab(tab1)
tabGroup.addTab(tab2)
tabGroup.addTab(tab3)
tabGroup.open()

var button1 = Titanium.UI.createButton({
    title: 'go to second',
    widgh: Titanium.UI.SIZE,
    height: Titanium.UI.SIZE
})
button1.addEventListener('click', function(e){
    tabGroup.setActiveTab(1);
})

var button2 = Titanium.UI.createButton({
    title: 'go to third',
    widgh: Titanium.UI.SIZE,
    height: Titanium.UI.SIZE
})
button2.addEventListener('click', function(e){
    tabGroup.setActiveTab(2);
})

window1.add(button1)
window2.add(button2)

这是在thirdTab.js

var window3 = Titanium.UI.currentWindow

var button3 = Titanium.UI.createButton({
    title: 'go to first',
    widgh: Titanium.UI.SIZE,
    height: Titanium.UI.SIZE
})
window3.add(button3)

button3.addEventListener('click', function(e){
    tabGroup.setActiveTab(0);
})

Answer 1

通过加载带有 url 的第三个窗口:“thirdTab.js”，您正在创建一个单独的 JavaScript 上下文。您可以像创建 window1 和 window2 一样创建 window3，并且可以访问相同的 JavaScript 变量。

为了更好地用 Titanium 构建代码，您应该阅读 CommonJS modules in Titanium 。我喜欢的方法，因为它非常钛风格，可能会像这样:

app.js

....
var window3 = require('window3').createView(tabGroup);
....

window3.js

exports.createView = function(tabGroup) {
    var win = Ti.UI.createWindow({
        backgroundColor: 'yellow'
    });
    var button = Ti.UI.createButton({
        title: 'go to first',
        width: Ti.UI.SIZE, height: Ti.UI.SIZE
    });
    button.addEventListener('click', function(e){
        tabGroup.setActiveTab(0);
    });
    win.add(button);
    return win;
};

这样您就可以准确地知道正在传递哪些变量以及它们的使用位置。

希望这有帮助!