使用按钮从详细信息视图返回到主视图，而不是使用钛的顶部栏

Question

我有一个导航组，我有一个Master和一个DetailView。使用主视图打开详细信息视图时，导航组会自动在顶部栏上提供一个按钮以返回到主视图。

我想实现的是在详细信息视图上有一个按钮。单击详细信息视图上的按钮，想要处理作业，然后返回到主视图。

我可以将侦听器添加到详细信息视图上的按钮并执行所需的作业，但是如何关闭详细信息视图并返回到主视图？

下面发布的是 3 个文件的代码

• 应用程序窗口.js
• 主视图.js
• 详细信息视图.js

应用程序窗口.js

var MasterView = require('ui/common/MasterView'), DetailView = require('ui/common/DetailView');
    var masterView = new MasterView(), detailView = new DetailView();
    //create master view container
    var masterContainerWindow = Ti.UI.createWindow({
        title : 'Product',
    });
    masterContainerWindow.add(masterView);
    //create detail view container
    var detailContainerWindow = Ti.UI.createWindow({
        title : 'Product Details'
    });
    detailContainerWindow.add(detailView);
    //create iOS specific NavGroup UI
    var navGroup = Ti.UI.iPhone.createNavigationGroup({
        window : masterContainerWindow
    });
    self.add(navGroup);
    //add behavior for master view
    masterView.addEventListener('itemSelected', function(e) {
        detailView.fireEvent('itemSelected', e);
        navGroup.open(detailContainerWindow);
    });
masterContainerWindow.open();

主视图.js

//Master View Component Constructor
function MasterView() {
    //create object instance, parasitic subclass of Observable
    var self = Ti.UI.createView({
        backgroundColor:'white'
    });
    //some dummy data for our table view
    var tableData = [
        {title:'Apples', price:'1.25', hasChild:true, color: '#000'},
        {title:'Grapes', price:'1.50', hasChild:true, color: '#000'},
        {title:'Oranges', price:'2.50', hasChild:true, color: '#000'},
        {title:'Bananas', price:'1.50', hasChild:true, color: '#000'},
        {title:'Pears', price:'1.40', hasChild:true, color: '#000'},
        {title:'Kiwis', price:'1.00', hasChild:true, color: '#000'}
    ];
    var table = Ti.UI.createTableView({
        data:tableData
    });
    self.add(table);
    //add behavior
    table.addEventListener('click', function(e) {
        self.fireEvent('itemSelected', {
            name:e.rowData.title,
            price:e.rowData.price
        });
    });
    return self;
};
module.exports = MasterView;

详细视图.js

function DetailView() {
    var self = Ti.UI.createView();
    var lbl = Ti.UI.createLabel({
        text : 'Please select an item',
        height : 'auto',
        width : 'auto',
        color : '#000'
    });
    self.add(lbl);
    self.addEventListener('itemSelected', function(e) {
        lbl.text = e.name + ': $' + e.price;
    });
    var btn = Ti.UI.createButton({
        text : 'Close Me'
    });
    btn.addEventListener('click',function(){
        //Do Opertation
        //Close Detail View
    });
    self.add(btn);
    return self;
};
module.exports = DetailView;

在detailView上，我添加了一个名为"btn"的按钮，它也有一个eventListener。我想使用此按钮关闭详细信息视图。请指教。感谢和问候

阿比谢克·斯里坎特

Answer 1

我在应用程序窗口上为 detailView 创建了一个自定义事件侦听器，在单击按钮时触发了该事件。 使用了 navGroup 的 close 事件传递 detailContainerWindow。

应用程序窗口.js

detailView.addEventListener('closeItem', function(e) {
            Ti.API.info('event called');
            navGroup.close(detailContainerWindow);
        });

详细视图.js

btn.addEventListener('click', function(e) {
            self.fireEvent('closeItem', e);
});

Answer 2

使用 detailContainerWindow 的 android:back 事件或close事件。

btn.addEventlistner('click',function(e){
    // your code
    // window close for `close` event or manually fire `android:back`
});

这将打开你的主容器窗口。

希望这能解决你的问题。