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

您可以通过将async与Ajax一起使用来进行此操作：

{
    // Tab path
    path: '/',
    // Tab id
    id: 'tab-1',
    async(routeTo, routeFrom, resolve, reject) {      
      app.request.json('users.json', {/* Your param if set */},function (data) {
        resolve({ 
          url: './pages_pro/A.html'
        });
      });
    }
},

template binding

Answer 2

我已经尝试过，但是没有用：（

我的控制台中没有任何内容（不调用api网址）。

这是我的route.js

lazy load

此处为test.html

 {
 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',
  },
],
},

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

2 个答案: