Question

我尝试使用Onsen框架创建一个Phonegap项目。我在这里面临一个问题，我只想每20秒重新加载/刷新一个子ons-template。我不知道如何在这里完成JQuery部分。

我有一个ons-page作为应用程序的主页面。用户点击“GO＆＃39;按钮将显示ons-template page1.html，然后转到page2.html。现在当用户在page1.html中时，sytem将启动计时器20秒并通过调用javascript函数loadData（）自动刷新页面以在page2.html显示消息，直到用户不再在page2.html计时器关闭。

以前有人面对过吗？这是我的示例代码：

<html>
<head>
<meta charset="UTF-8">
<title>App Title</title>

<link rel='stylesheet prefetch' href='css/onsenui.css'>
<link rel='stylesheet prefetch' href='css/onsen-css-components.css'>
<link rel='stylesheet prefetch' href='css/ionicons/css/ionicons.css'>
<link rel='stylesheet prefetch' href='css/ionicons/css/ionicons.min.css'>
<link rel='stylesheet prefetch' href='css/ionicons/fonts/ionicons.svg'>
<link rel='stylesheet prefetch' href='css/font_awesome/css/font-awesome.css'>
<link rel='stylesheet prefetch' href='css/font_awesome/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='css/font_awesome/css/pop.css'>

<script language="javascript" src='js/angular/angular.min.js'></script>
<script language="javascript" src='js/onsenui.min.js'></script>
<script language="javascript" src='js/popover.js'></script>
<script language="javascript" src="js/jquery-1.10.2.min.js"></script>
<script language="javascript" src='js/onsenui.js'></script>


<script language="javascript">
    MAX = 3;

    window.console = window.console || function(t) {};
    window.open = function(){ console.log('window.open is disabled.'); };

    if (false) {
      window.ontouchstart = function(){};
    }

    var module = ons.bootstrap();
    module.controller('AppController', function($scope) {
        $scope.login_name = "";
        $scope.order_list = "";  
        $scope.p = 1;

         ons.ready(function() {

             //new test of popover
            ons.createPopover('popover1.html').then(function(popover) {
            $scope.popover1 = popover;
            });

            ons.createPopover('popover2.html').then(function(popover) {
                $scope.popover2 = popover;
            });  

            $scope.show = function(e) {
                $scope['popover'+$scope.p].show(e);

            };

             //pop up for add table
             $scope.prompt = function() {
                ons.notification.prompt({message: "Please enter Amount",callback: function(tbl_num) {
                    ons.notification.alert({message: 'Amount is ' + parseInt(tbl_num || 0) + ' added.'});
                    }   
                });
            }


         });
    });


/*Features for pop up*/    
function page2()
{
   myNavigator.pushPage('page2.html', { animation : 'slide' } );
}

function page1()
{
   myNavigator.pushPage('page1.html', { animation : 'slide' } );
}

function loadData()
{
    if (MAX == 3){
        angular.element(document.getElementById('AppController')).scope().data_show = "IM NO 3!";
        MAX = 2;
    }
    else if (MAX == 2){
        angular.element(document.getElementById('AppController')).scope().data_show = "IM NO 2!";
        MAX = 1
    }else if (MAX == 1){
        angular.element(document.getElementById('AppController')).scope().data_show = "IM NO 1!";
        MAX = 3
    }
}

</script>

</head>

<body ng-controller="AppController" id="AppController">

<ons-navigator title="Navigator" var="myNavigator">
<ons-page>

      <div>
       <div>
           <ons-button modifier="login_btn" onclick="getPass(9)">9</ons-button>
           <ons-button modifier="login_btn" id="top-right" ng-click="show('#top-right')">0</ons-button>
           <ons-button modifier="login_clr" onclick="page1()" id="but_login">GO!</ons-button>
      </div> 
          <input type="hidden" id="txthidd" maxlength="4" size="30" name="Display"> 
     </div> 

</ons-page>
</ons-navigator>

 <ons-template id="page1.html" style="display:none;">
    <ons-page>   
      <ons-toolbar>
        <div class="left"><ons-back-button onclick="onLogout()">Page1</ons-back-button></div>
      </ons-toolbar>
      <ons-tabbar>
        <ons-button icon="ion-ios-checkmark" modifier="navi_button" class="chk_green" onclick="page2()">page2</ons-button>
      </ons-tabbar> 
      <ons-scroller class="order_listing"> <!--load all the list -->  
          {{data_show}}
        <div class="lower-left-button"><span style="color:white;font-size:28px;">17:15</span></div>
        </ons-scroller>
    </ons-page>

  </ons-template> 

  <ons-template id="page2.html" style="display:none;">
    <ons-page>   
      <ons-toolbar>
        <div class="left"><ons-back-button onclick="">Back</ons-back-button></div>
      </ons-toolbar>
      <ons-scroller class="order_listing"> <!--load all the order list -->          
        <div class="lower-left-button"><span style="color:white;font-size:28px;">17:15</span></div>
        </ons-scroller>
    </ons-page>

  </ons-template>     

<!--Pop up menu  -->
<script type="text/ons-template" id="popover1.html">
  <ons-popover direction="up down" cancelable>
    <div style="text-align: center; opacity: 0.5;">
      <p>Popover <strong>1</strong></p>
      <p><small>Click the background to remove the popover.</small></p>
    </div>
  </ons-popover>
</script>

<script type="text/ons-template" id="popover2.html">
  <ons-popover direction="up down" cancelable>
    <div style="text-align: center; opacity: 0.5;">
      <p>Popover <strong>2</strong></p>
      <p><small>Click the background to remove the popover.</small></p>
    </div>
  </ons-popover>
</script>



</body> 
</html>

JQuery Onsen Reload / Refresh Child Ons-template页面

0 个答案: