在cordova的framwork7中使用"Template7"模板引擎时无限滚动实现

Question

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

在加载更多事件触发时，如何在底部的现有联系人列表中加载下一页数据。

对于模板 7，我正在使用此参考 site：

要在 pageInit 上加载联系人，我正在使用此代码呈现第一页数据：

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

我不想像普通追加那样在 li 中使用直接追加。例如：

// 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.

中使用的那样

谢谢。

Answer 1

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

在模板 7 中，我们传递了 html 数据和 return 编译数据，在该编译数据上使用 as 方法并传递 json 作为参数及其 return在生成数据后编辑我们的最终输出。我用这种方式在我的 framework7 应用程序中实现，它的工作很棒。

在 framework7 中实施的步骤：

在 framework7 的 preprocess 方法中，它在渲染我们的输出到屏幕之前和执行我们的任何任务之前调用。在这种方法中，我为我的重复任务获得了 html，然后处理数据，当我必须在无限调用中使用相同的 html 时，我将使用我使用预处理方法存储的数据。

例如： 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 中的预处理方法：

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;

});

Answer 2

当您收到 json 的数据时，只需像这样创建一个 html 变量并附加！

          var html = '';

          data.contacts.forEach(contact => {
            html += `<li>
      
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">${contact.title}</div>
                </div>
              </div>
    
          </li>`;
          });


          // Append new items
          $$('.contacts ul').append(html);

在cordova的framwork7中使用"Template7"模板引擎时无限滚动实现

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

jquery

template-engine

cordova

html-framework-7