Framework7 (v2) Populate with Ajax

items.html

<template>
  
  <div class="page">
    
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link icon-only panel-open" data-panel="left">
            <i class="fa fa-user-o" aria-hidden="true"></i>
          </a>
        </div>
        <div class="title sliding brand "><img src="images/logo.jpg"> <span>MyApp</span></div>
        <div class="right">
          <a href="#" class="link icon-only panel-open" data-panel="right">
            <i class="fa fa-search" aria-hidden="true"></i>
          </a>
        </div>
      </div>
    </div>

    <div class="page-content">
      
      <div class="item-overview list-block">
        {{#each items}}
          <div class="{{#compareIndex @index "0"}} item-summary-large item-summary {{else}} item-summary {{/compareIndex}}" data-index="{{@index}}">
            <div class="item-details">
              <span class="title">{{title.rendered}}</span>
            </div>
            <div class="item-image" style="background-image:url({{thumbnail_image_url}});"></div>
            <a class="item-anchor" href="/item/{{id}}/"></a>
          </div>
        {{/each}}
      </div>

    </div>

  </div>
</template>

routes.js

routes = [
{
    path: '/items/',
    async: function (routeTo, routeFrom, resolve, reject) {
      app.preloader.show();

      app.request({
        beforeSend: function ( xhr ) {
          xhr.setRequestHeader( 'authorization', localStorage.getItem('baseAuthentication') );
        },
        url: apiurl + '/posts/',
        dataType: 'json',
        method: "GET",
        crossDomain: true,
        success: function(response) {

          resolve(
            {
              componentUrl: './pages/items.html',
            },

            {
              context: {
                items: response,
              },
            }
          );

        }
      });

      app.preloader.hide();
    },
  }
};