Infinite scroll implement when use “Template7” template engine in framwork7 with cordova

问题

I have use Template7 for rendering data in my contact page, but on my contact list thousand of contact available, So i have to use infinite scroll for load more contact.

On load more event fire how can i load next page data in existing contact list at bottom.

For template 7 i am using this reference site:

To load contact on pageInit i am using this code to render first page data:

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

I don't want to use direct appending in li like normal appending. For example:

// 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);
      });

How can i solved this, any body have idea then suggest me. I want to use template7 engine rendering method to load into existing list, like used in angular js.

Thanks.

回答1:

Yes finally, i got solution to user same template and template compiled as same way as display initial record.

In template7, we passed html data and that return compiled data, on that compiled data use as method and pass json as an argument and its returned our final output after generating data. I am used this way to implement in my framework7 apps and its work awesome.

Step to implement in framework7:

In preprocess method of framework7, which call before rendring ourout put on screen and before execute our any task. In this method i got html for my repeated task and then proceed data, and when i have to used in infinite call same html then i am used that data which i have store using preprocess method.

For example: 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>

preprocess method in 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)
    }
  }
});

//in infinite method

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;

});

来源：https://stackoverflow.com/questions/39467774/infinite-scroll-implement-when-use-template7-template-engine-in-framwork7-with

标签

jquery

cordova

template-engine

html-framework-7