[Solved] Template7 syntax F7v2

Questions
1

I need to implement a menu divided into blocks from app.data.myobject
Can you help me to understand the TEMPLATE7 syntax.

In the code below, I described the {{#if}} logic since I understand it should work

app.data.myobject = [
  {
    "stage": "Home",
    "group": 1
  },
  {
    "stage": "First Title",
    "group": 2
  },
  {
    "stage": "Second Title",
    "group": 2
  },
  {
    "stage": "Third Title",
    "group": 2
  },
  {
    "stage": "About",
    "group": 3
  }
]

<div class="menu-tab-menu">
    <div class="list links-list">
        <ul>
            {{#each $root.myobject}}
                <li><a href="#tab-{{@index}}" class="menu-tab-link tab-link {{#if @first}}tab-link-active{{/if}}">{{this.stage}}</a></li>

                {{$if @index>0 && @index<$root.myobject.length-1}}
                    {{$if $root.myobject[@index].group !== $root.myobject[@index-1].group}}
                        </ul>
                            </div>
                            <!-- -->
                            <div class="list links-list">
                        <ul>      
                    {{/if}}
                {{/if}}
            {{/each}}
        </ul>
    </div>
</div>

<div class="tabs nested menu-tab-tabs">
  {{#each $root.myobject}}
  <div id="tab-{{@index}}" class="page-content tab {{#if @first}}tab-active{{/if}}"></div></div></div>
  {{/each}}
</div>
</div>
2

if helper doesn’t allow to use dynamic conditions. You need to use js_if helper instead http://idangero.us/template7/, something like:

{{#js_if '@index > 0 && @index < this.$root.myobject.length-1`}}
...
{{/js_if}}
1 Like
3

Thanks a lot! It’s all my UX. The first sentence has a reference to Handlebars-like syntax. I go through it and look API, then go back to https://framework7.io/docs/template7.html and scroll down to examples… I just skipped the link to Template7 Website [facepalm]

4

That’s work for me!

app.data.myobject = [ { "stage": "Home", "group": 1 }, { "stage": "First Title", "group": 2 }, { "stage": "Second Title", "group": 2 }, { "stage": "Third Title", "group": 2 }, { "stage": "About", "group": 3 }
]
    
<div class="page-content">
      <div class="list links-list">
        <ul>
          {{#each $root.myobject}}
          <li><a href="#tab-{{@index}}" class="menu-tab-link tab-link {{#if @first}}color-red{{/if}}">{{this.stage}}</a></li>
             {{#js_if "@index < app.data.myobject.length-1 && app.data.myobject[@index].group !== app.data.myobject[@index+1].group"}}
              </ul></div><div class="list links-list"><ul>
            {{/js_if}}
          {{/each}}
        </ul>
      </div>
    </div>
5

can there be an {{else}} used with js_if ?