Outil de défilement infini lors de l'utilisation du moteur de template "Template7" dans framwork7 avec cordova

Question

J'ai utiliser Template7 pour rendre les données dans ma page contact, mais sur ma liste de contacts mille contacts disponibles, donc je dois utiliser scroll infinie pour charger plus de contact .

En charge plus d'incendie d'incendie comment puis-je charger les données de la page suivante dans la liste de contacts existante en bas.

Pour le modèle 7 J'utilise cette référence site:

Pour charger le contact sur pageInit je suis en utilisant ce code pour rendre les premières données de la page:

<p>Here are the list of people i know:</p> 
<ul class="list-block"> 
    {{#each people}} 
    <li>{{firstName}} {{lastName}}</li> 
    {{/each}}  
</ul> 

Je ne veux pas utiliser appending directe en li comme l'ajout normal. Par exemple:

// Attach 'infinite' event handler 
     $$('.infinite-scroll').on('infinite', function() { 
      var itemsPerLoad=20; 
      var html = ''; 
      for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) { 
      html += '<li>Firstname'+i+'</li>'; 
      } 

      // Append new items 
      $$('.list-block').append(html); 
     }); 

Comment est-ce que je peux résoudre ceci, n'importe quel corps a l'idée alors me suggérer. Je veux utiliser la méthode de rendu du moteur template7 pour charger dans la liste existante, comme utilisé dans js angulaire.

Merci.

Answer 1

Oui finalement, j'ai obtenu la solution à l'utilisateur même modèle et modèle compilé de la même manière que l'enregistrement initial d'affichage.

Dans template7, nous avons transmis des données html et renvoyé des données compilées, sur cette utilisation de données compilées comme méthode et passé json comme argument et renvoyé notre sortie finale après la génération de données. Je suis habitué de cette façon à mettre en œuvre dans mes applications framework7 et son travail génial.

étape à mettre en œuvre framework7:

Dans prétraiter méthode de framework7, qui appellent avant Rendring ourout mettre à l'écran et avant d'exécuter notre toute tâche. Dans cette méthode j'ai obtenu html pour ma tâche répétée et ensuite procéder à des données, et quand je dois utiliser dans l'appel infini même html alors je suis utilisé que les données que j'ai stocker en utilisant la méthode de pré-traitement.

Par exemple: contact.html

<div data-page="news" class="page"> 
    <div class="page-content infinite-scroll"> 
    <div class="list-block"> 
     <!-- contactList class also used for loadmore data, to copy template --> 
     <ul class="contactList"> 
     {{#each contactList}} 
     <li class="item-content"> 
      <div class="item-inner"> 
      <div class="item-title">{{firstname}} {{lastname}}</div> 
      </div> 
     </li> 
     {{else}} 
     <li>No contact found</li> 
     {{/each}} 
     </ul> 
    </div> 
    <div class="infinite-scroll-preloader"> 
     <div class="preloader"></div> 
    </div> 
    </div> 
</div> 

méthode de pré-traitement dans framework7:

app={}; 
myApp = new Framework7({ 
    preprocess: function(content, url, next) { 
    if (url == "contact.html") { 
     app.contactCompiledTemplate = Template7.compile($(content).find("ul.contactList").html()); 
     //get my json data using ajax first 10 record and render 
     compiledTemplate = Template7.compile(c); 
     compiledTemplate(json) 
    } 
    } 
}); 

// dans la méthode infinie

var myApp = new Framework7(); 

var $$ = Dom7; 

// Loading flag 
var loading = false; 


// Attach 'infinite' event handler 
$$('.infinite-scroll').on('infinite', function() { 

    // Exit, if loading in progress 
    if (loading) return; 

    // Set loading flag 
    loading = true; 

    //Your ajax process and get json data of contact same way first time you are getting 
    //fadeIn compiled html in contactList 
    $("ul.contactList").append(
    app.contactCompiledTemplate(json) 
); 

    // Reset loading flag 
    loading = false; 

});