Cannot iterate in an array with template7 {{#each}} helper

Hi,

I am new to F7, I am adding some features on an existing Framework7 v1 app, (version 1.7.1)

I am trying to render a template7 with an array data as input data, to no avail.
I have search and visited countless relevant post but somehow I cannot make it work.
Somehow, when I use a plain object as input data, template is rendered successfully.

So my template is

var myApp = new Framework7({
// Enable templates auto precompilation
precompileTemplates: true,

});

myApp.onPageInit('index', function (page) {
  var slides = [{eng: "interest 1"},{eng: "interest 2"}]; //<<<template not rendered
  var slides = {eng: "interest 1"};  // <<<<template rendered succesfully
  var html = Template7.templates.interestTemplate(slides);
  console.log('html',html);

What am I missing here?
Any help is greatly appreciated.

pick one of them

#1

<script id="interestTemplate" type="text/template7">
  {{#this}}
  <a>{{eng}}</a>
  {{/this}}
</script>
myApp.onPageInit('index',function(page){
  var slides = [{eng: "interest 1"},{eng: "interest 2"}];
  var html = Template7.templates.interestTemplate(slides);
  console.log('html',html);
});

#2

<script id="interestTemplate" type="text/template7">
  {{#slides}}
  <a>{{eng}}</a>
  {{/slides}}
</script>
myApp.onPageInit('index',function(page){
  var obj = {
    slides: [{eng: "interest 1"},{eng: "interest 2"}]
  };
  var html = Template7.templates.interestTemplate(obj);
  console.log('html',html);
});
1 Like

Yep, thanks that did it.