0

我有一个导航组，我有一个 Master 和一个 DetailView。当使用 MasterView 打开 detailView 时，navigationGroup 会自动在顶栏提供一个按钮，用于返回 MasterView。

我想要实现的是在 detailView 上有一个按钮。单击 detailView 上的按钮后，想要处理作业，然后返回 MasterView。

我可以在 detailView 上的按钮上添加一个侦听器并执行所需的工作，但是如何关闭 detailView 并返回到 MasterView？

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

  • 应用程序窗口.js
  • MasterView.js
  • DetailView.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();

MasterView.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;

DetailView.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。我想使用此按钮关闭详细视图。请指教。谢谢并恭祝安康

阿比舍克·斯里坎特

4

2 回答 2

1

我为 ApplicationWindow 上的 detailView 创建了一个自定义 EventListener，在单击按钮时触发了该事件。使用 navGroup 的 close 事件传递 detailContainerWindow。

应用程序窗口.js

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

        });

DetailView.js

btn.addEventListener('click', function(e) {
            self.fireEvent('closeItem', e);
});
于 2012-06-15T08:45:07.620 回答
0

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

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

});

这将打开您的 masterContainerWindow。

希望这可以解决您的问题。

于 2012-06-15T06:23:12.300 回答