PhoneGap NativeControls选项卡选择

Question

我使用XCode版本4.2和PhoneGap版本1.5.0开发iOS应用程序。使用下面的代码，我可以在页面上添加标签栏，但是我无法将它导航到选择的另一个页面。我使用PhoneGap的NativeControls插件创建了标签栏。

function onDeviceReady() 
{ 
    Cordova.exec("NativeControls.createTabBar"   
    var options = "bottom"; 

    window.onorientationchange = function() { 
      var orientation = window.orientation; 

      switch(orientation) { 
       case 0: 

       Cordova.exec("NativeControls.showTabBar", options); 


       /* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */ 
       document.getElementById("currentOrientation").innerHTML="Now in portrait orientation (Home button on the bottom)."; 
       break; 

       case 90: 

       Cordova.exec("NativeControls.showTabBar", options); 

       document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the left (Home button to the right)."; 
       break; 

       case -90: 

       Cordova.exec("NativeControls.showTabBar", options); 

       document.getElementById("currentOrientation").innerHTML="Now in landscape orientation and turned to the right (Home button to the left)."; 
       break; 

       default: 

       Cordova.exec("NativeControls.showTabBar", options); 

       document.getElementById("currentOrientation").innerHTML="Now the orientation must be -180. default: case: "; 
       break;   
      }//end switch 
     }//end window.orientationchange 

     Cordova.exec("NativeControls.showTabBar", options); 
     Cordova.exec("NativeControls.createTabBarItem", "Wineries", "Wineries", null, "1", options); 
     Cordova.exec("NativeControls.createTabBarItem", "Wines", "Wines", "www/Wine.png", "2", {onSelect: function() {location.href = "Review.html" }}); 
     Cordova.exec("NativeControls.createTabBarItem", "Tours", "Tours", null, "3", options); 
     Cordova.exec("NativeControls.createTabBarItem", "Non-Mobile", "Non-Mobile", null, "4", options); 

     Cordova.exec("NativeControls.showTabBarItems", "Wineries", "Wines", "Tours", "Non-Mobile"); 
     Cordova.exec("NativeControls.selectTabBarItem", "Wineries"); 
} 

但是，这段代码根本无法改变页面的选择。当我用下面的代码

Cordova.exec("NativeControls.createTabBarItem", "Wines", "Wines", "www/Wine.png", "2", {onSelect: function() {location.href = "Review.html" }});

编辑同样的情况。我应该在第二页重复相同的代码吗？如果是的话，我应该调用这个方法？

function onDeviceReady() 
    {    

     var nc = window.plugins.nativeControls; 

     nc.createTabBar(); 
     nc.createTabBarItem("Wineries", "Wineries", "www/grape.png", {onSelect: function() {location.href = "index.html" }}); 
     nc.createTabBarItem("Wines", "Wines", "www/Wine.png", {onSelect: function() {location.href = "Review.html" }}); 
     nc.createTabBarItem("Tours", "Tours", "www/tour.png", null); 
     nc.createTabBarItem("Non-Mobile", "Non-Mobile", "", null); 
     nc.showTabBar(); 
     nc.showTabBarItems("Wineries", "Wines", "Tours", "Non-Mobile"); 
     nc.selectTabBarItem("Wineries"); 
    } 

Answer 1

刚刚找到解决我的问题的方法。而不是分配一个新的HTML页面到每个选项卡，将其连接到功能。在每次通话中，都会相应地更改主体内容。 但是，我还想知道是否有其他解决方案！

function onDeviceReady() 
{    
    var title = "WineWeb"; 
    nc = window.plugins.nativeControls; 

    nc.createTabBar(); 
    nc.createTabBarItem("Wineries", "Wineries", "www/grape.png", {onSelect: Wineries}); 
    nc.createTabBarItem("Wines", "Wines", "www/Wine.png", {onSelect: Review}); 
    nc.createTabBarItem("Tours", "Tours", "www/tour.png", null); 
    nc.createTabBarItem("Non-Mobile", "Non-Mobile", "", null); 
    nc.showTabBar(); 
    nc.showTabBarItems("Wineries", "Wines", "Tours", "Non-Mobile"); 
    nc.selectTabBarItem("Wineries"); 
} 

function Wineries() { 

    nc = window.plugins.nativeControls; 
    nc.setNavBarTitle("Wineries"); 
    nc.hideLeftNavButton(); 

    document.getElementById('Review').style.display='none'; 
    document.getElementById('Wineries').style.display='block'; 
    document.getElementById('AboutUs').style.display='none'; 
} 

Answer 2

我有这个问题，我的周围的方式，虽然密集，是使用像Backbone.js的框架。我建立了一个路由器，根据url调用各种视图（例如#newsfeed）。这很有效，因为您可以轻松将这些视图绑定到模型和模板。

相关的代码看起来像这样。这是基于http://blog.viison.com/post/11097185009/how-to-switch-views-using-backbonejs的完整示例。

var ApplicationRouter = Backbone.Router.extend({ 

    initialize: function(el) { 
     this.el = el;   
     this.newsfeedView = new NewsContentView({template: '#newsfeed-template'}); 
    }, 

    onDeviceReady: function() { 

     plugins.tabBar.createItem("feed", "", "tabButton:Contacts", {onSelect: function() {location.href = "#newsfeed" }}); 
    }, 

    routes: { 
     "": "newsfeed", 
     "newsfeed": "newsfeed", 
    }, 

    newsfeed: function() { 
     console.log('switch to newsfeed'); 
     this.switchView(this.newsfeedView); 
     this.setActiveEntry('#newsfeed'); 
    }, 
});