使用按鈕代替使用鈦的頂部欄，從DetailView返回到MasterView

Question

我有一個導航組，使用它我有一個Master和一個DetailView。使用MasterView打開detailView時，navigationGroup會自動在頂部欄上提供一個按鈕，以返回到MasterView。

我想獲得的是在detailView上有一個按鈕。點擊detailView上的按鈕，想要處理作業，然後返回到MasterView。

我能夠添加一個偵聽器到detailView上的按鈕並執行所需的工作，但我如何關閉detailView並返回到MasterView？

下面發佈是3檔

• ApplicationWindow.js
• MasterView.js
• DetailView.js

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

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'，這也有一個事件監聽按鈕。我想用這個按鈕關閉detailview。請指教。 感謝和問候

AbishekřSrikaanth

Answer 1

我爲ApplicationWindow上的detailView創建了一個自定義EventListener，並在點擊按鈕時觸發了該事件。使用navGroup的close事件傳遞detailContainerWindow。

ApplicationWindow.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); 
}); 

Answer 2

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

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

}); 

這將打開您的masterContainerWindow。

希望這可以解決您的問題。