Framework7 :当路由器选项卡打开时加载Ajax内容

Question

我试着在framework7上理解一些东西来构建一个混合应用程序。我有一个类似路由器标签的应用程序：

{
path: '/pro/',
url: './pages_pro/index.html',
tabs: [
  {
    // Tab path
    path: '/',
    // Tab id
    id: 'tab-1',
    url: './pages_pro/A.html',
  },
  // Second tab
  {
    path: '/tab-2/',
    id: 'tab-2',
    url: './pages_pro/B.html',
  },
  // Third tab
  {
    path: '/tab-3/',
    id: 'tab-3',
     url: './pages_pro/C.html',
  },
],
},

当选项卡打开时，我想使用ajax和php从API加载内容。

帮我的主意？

谢谢！

Answer 1

我已经试过了，但没有用。

在我的控制台中没有附加任何内容(不调用api url)。

我的route.js

 {
 path: '/pro/',
 url: './pages_pro/index.html',
 tabs: [
 {
 path: '/',
 id: 'tab-1',

 async: function (routeTo, routeFrom, resolve, reject) {
    // Router instance
    var router = this;
    // App instance
   var app = router.app;
   var idcat="1";

  // Show Preloader
  app.preloader.show();

  app.request({
    url: 'http://api.casanova-life.com/pro/souscategorie.php',
    type: "GET",
    dataType: 'json',
    data: "idcat="+idcat,
    timeout: 1000,
    success: function(reponse){
            if(reponse['success']==true && reponse['results']['nb']>0)
            {   

                var sub_cat=[];

                for(var key in reponse['results']) 
                {
                  if(!sub_cat[key])
                  {
                      sub_cat[key] = [];
                  }
                    sub_cat[key]['idcat']=reponse['results'][key].idcat;
                    sub_cat[key]['idsubcat']=reponse['results'][key].idsubcat;
                    sub_cat[key]['titre']=reponse['results'][key].titre;
                    sub_cat[key]['url']="/sub_cat/"+sub_cat[key]['idcat']+"/"+sub_cat[key]['idsubcat']+"/";
                }
            }
            else if(reponse['error']=="noresult")
            {

            }
            app.preloader.hide();
            // Resolve route to load page
            resolve(
              {
                componentUrl: './pages_pro/test.html',

              },
              {
                context: {
                  sub_cat: sub_cat,
                }

              }

            );
    },
    error: function(){
          if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) 
          {
             app.preloader.hide();
              navigator.notification.confirm(
                 "Error during loading data\n Try again ?",
                    callback_refresh_result,
                    'Information',
                    'No,Yes');
          }
          else
          {
            app.preloader.hide();
              alert("Error during loading data");
          }

    }
  })
 }, // End ASYNC 
 },
 // Second tab
  {
    path: '/tab-2/',
    id: 'tab-2',
    url: './pages_pro/test2.html',
  },
  // Third tab
  {
    path: '/tab-3/',
    id: 'tab-3',
     url: './pages_pro/test3.html',
  },
],
},

在这里test.html

<template>
<div class="page" data-page="test">
  <div class="page-content">
    <div class="block-title">TEST</div>
    <div class="list">
    <ul>
      {{#each sub_cat}}
        <li><a href="{{url}}" class="item-content item-link" data-idcat="{{idcat}}" data-idtitre=" {{idsubcat}}"><div class="item-inner"><div class="item-title">{{title}}</div></div></a></li>
      {{/each}}
    </ul>
  </div>

  </div>
  <!-- End of PAGE CONTENT-->
</div>
<!-- End of PAGE RESIDENTIEL-->
</template>
<script>
return {}
</script>