Iteration

j-for – As an attribute

This is angular/vue style and supposed to be a legacy, recommended to use component ‘j-for’

Important mote: iterated items inside loop should be in square brackes [e.dynamic_property], not as global {{dynamic_property}}

Shortcut Syntax: Jet adds default data if
not provided

• ‘e’ as iterated item
• ‘i’ as index

So all three below are equal and valid

<li j-for="(e, i) in items">[e.title]</li>
<li j-for="e in items">[e.title]</li>
<li j-for="items">[e.title]</li>

j-for – As a Component

Uses more shorten syntax

Iterated element do not uses model object.key, directly use key, for nested arrays use components

com({
  name: 'com-iteration',
  data: {
    items: [
      { title: 'Item 1', content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit' },
      { title: 'Item 2', content: 'Lorem ipsum dolor sit amet consectetur adipisicing elits' },
      { title: 'Item 3', content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit' },
    ],
  },
  tpl() {
    return html`  
      <j-for data="items">   
            <h3>[title]</h3>
            <p>[content]</</p> 
      </j-for> 
        `;
  },
});

More details comming soon…