Framework7: загрузка содержимого Ajax при открытии вкладок маршрутизатора - PullRequest
Новая
       12

Framework7: загрузка содержимого Ajax при открытии вкладок маршрутизатора

0 голосов
/ 02 ноября 2018

Я пытаюсь понять кое-что на 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',
  },
],
},

Я бы хотел загружать контент из API, используя ajax и php, когда открыта вкладка.

Идея помочь мне?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Я уже пробовал, но это не работает: (

Ничего не добавляется в мою консоль (нет вызова API-адреса).

Вот мой 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>
0 голосов
/ 03 ноября 2018

Вы можете сделать это, используя 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'
        });
      });
    }
},

Ссылка

...