当使用"Template7"时无限滚动工具.科尔多瓦在framwork7中的模板引擎 [英] Infinite scroll implement when use "Template7" template engine in framwork7 with cordova

问题描述

我已经使用Template7在我的联系人页面中呈现数据，但是在我的联系人列表中有数千个可用联系人，因此我必须使用无限滚动来加载更多联系人.

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.

对于模板7，我正在使用此引用网站:

For template 7 i am using this reference site:

要在pageInit上加载联系人，我正在使用以下代码来呈现首页数据:

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>

我不想像普通附加一样在li中使用直接附加.例如:

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

我该如何解决这个问题，任何人都有想法然后建议我.我想使用template7引擎呈现方法将其加载到现有列表中，例如在angular js中使用的那样.

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.

谢谢.

推荐答案

是的，我终于获得了解决用户相同模板和与显示初始记录相同方式编译的模板的解决方案.

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

在template7中，我们传递了html数据，并返回了编译后的数据，该编译后的数据用作方法，并将json用作参数，并在生成数据后返回了最终输出.我习惯用这种方式在我的framework7应用程序中实现它，并且它的工作很棒.

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.

要在framework7中实施的步骤:

Step to implement in framework7:

在framework7的预处理方法中，该方法在渲染我们的输出并在执行我们的任何任务之前调用.在这种方法中，我为重复的任务准备了html，然后继续处理数据，当我不得不在无限调用中使用相同的html时，便使用了通过预处理方法存储的数据.

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.

例如: contact.html

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>

framework7中的预处理方法:

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

//采用无限方法

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;

});

这篇关于当使用"Template7"时无限滚动工具.科尔多瓦在framwork7中的模板引擎的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！