title: Framework7 Loop Dynamic Content within Route
body: <p>I am using Framework 7 to load demo cards in the router.  The problem is I am not sure how to loop through multiple records in the template display.</p>
  
  <p>Here is my route    </p>
  
  <pre><code>{
  path: '/about/',
  async: function (routeTo, routeFrom, resolve, reject) {
    // Requested route
    // Get external data and return template7 template
    app.request.json('data.json', function (data) {
        console.log(data);
      resolve(
        // How and what to load: template
        {
          template: `&lt;div class="page"&gt;
                      &lt;div class="navbar"&gt;
                          &lt;div class="navbar-inner sliding"&gt;
                            &lt;div class="left"&gt;
                              &lt;a href="#" class="link back"&gt;
                                &lt;i class="icon icon-back"&gt;&lt;/i&gt;
                                &lt;span class="ios-only"&gt;Back&lt;/span&gt;
                              &lt;/a&gt;
                            &lt;/div&gt;
                            &lt;div class="title"&gt;News&lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="page-content"&gt;
                          &lt;div class="card demo-card-header-pic"&gt;
                                &lt;div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"&gt;&lt;/div&gt;
                                &lt;div class="card-content card-content-padding"&gt;
                                  &lt;p class="date"&gt;{{Title}}&lt;/p&gt;
                                  &lt;p&gt;{{Header}}&lt;/p&gt;
                                &lt;/div&gt;
                                &lt;div class="card-footer"&gt;&lt;a href="/about/3/" class="link"&gt;Read more&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;`
        },
        // Custom template context
        {
          context: {
            ID: data.content.ID,
              Title: data.content.Title,
              Header: data.content.Header,
              Description: data.content.Description,
              TitleImg: data.content.TitleImg,
          },
        }
      );
    });
  }
  </code></pre>
  
  <p>},</p>
  
  <p>here is sample json:</p>
  
  <pre><code>{
  "contentType": "news",
  "content": [{
      "ID": 1,
      "Title": "Test",
      "Header": "Short Text",
      "Description": "lorem ipsum",
      "TitleImg": "/img/collab.jpg"
  }, {
      "ID": 2,
      "Title": "Test2",
      "Header": "Short Text2",
      "Description": "lorem ipsum2",
      "TitleImg": "/img/collab.jpg"
  }]
  </code></pre>
  
  <p>}</p>
  
  <p>Right now it doesn't show anything but I would like to see both entries.</p>
  
  <p>TAKE 2 but still not working.... the items array has my data but the for loop doesnt work</p>
  
  <pre><code>{
  path: '/about/',
  async: function (routeTo, routeFrom, resolve, reject) {
    // Requested route
    // Get external data and return template7 template
    app.request.json('data.json', function (data) {
        for (var i = 0; i &lt; data.content.length; i++) {
            items.push({
              ID: data.content[i].ID,
              TitleImg: data.content[i].TitleImg,
              Title: data.content[i].Title,
              Header: data.content[i].Header
            });
          }
        console.log(items);
      resolve(
        {
          template: `&lt;div class="page"&gt;
                      &lt;div class="navbar"&gt;
                          &lt;div class="navbar-inner sliding"&gt;
                            &lt;div class="left"&gt;
                              &lt;a href="#" class="link back"&gt;
                                &lt;i class="icon icon-back"&gt;&lt;/i&gt;
                                &lt;span class="ios-only"&gt;Back&lt;/span&gt;
                              &lt;/a&gt;
                            &lt;/div&gt;
                            &lt;div class="title"&gt;News&lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="page-content"&gt;
                          &lt;div class="card demo-card-header-pic" v-for="item in items"&gt;
                                &lt;div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"&gt;&lt;/div&gt;
                                &lt;div class="card-content card-content-padding"&gt;
                                  &lt;p class="date"&gt;{{Title}}&lt;/p&gt;
                                  &lt;p&gt;{{Header}}&lt;/p&gt;
                                &lt;/div&gt;
                                &lt;div class="card-footer"&gt;&lt;a href="/about/{{ID}}/" class="link"&gt;Read more&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;`
        },
        {
          items: items,
        }
      );
    });
  }
  </code></pre>
  
  <p>},</p>
  
  <p>EDIT - Working solution thanks @djiggy</p>
  
  <pre><code>{{#each items}}
                          &lt;div class="card demo-card-header-pic"&gt;
                              &lt;a href="/about/{{ID}}/"&gt;
                                &lt;div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"&gt;&lt;div class="card-headerTxt"&gt;{{Title}}&lt;/div&gt;&lt;/div&gt;
                                &lt;div class="card-content card-content-padding"&gt;
                                  &lt;p&gt;{{Header}}&lt;/p&gt;
                                &lt;/div&gt;
                                  &lt;/a&gt;
                              &lt;/div&gt;
                          {{/each}}
  </code></pre>