riot each

by jpeter06

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.2.4/riot+compiler.min.js"></script>
<test></test>

<script type="riot/tag">
  <test>
    <div each={item in items}>
       <input if={item.type==='string'} name={item.id} value={item.val}>
       <label if={item.type==='checkbox'}><input type="checkbox"  name={ item.id }/> {item.val}</label>
       <select if={item.type==='selector'}  name={ item.id } >
          <option each={opt in item.options } value={opt.id} selected={opt.id==item.selected}>{opt.val}</option>
       </select>
    </div>
    <button onclick={change}>Add</button>
    <button onclick={show}>Show</button>
            
      this.next = 4
      this.items = [
        {'id':1,'val':'val1','type':'checkbox'},
        {'id':2,'val':'val2','type':'string'},
        {'id':3,'val':'val3','type':'selector','options':[{'id':'id1','val':'val1'},{'id':'id2','val':'val2'}],'selected':'id2'}
        ]
      this.items2 = [
        {'id':1,'val':'val4','type':'string'},
        {'id':2,'val':'val5','type':'string'},
        {'id':3,'val':'val66','type':'checkbox'},
        ]

      change(e) {
          this.items=this.items2;
          this.update()
      }

      show(e) {
          console.log("Inputs : " + this.foo.length)
      }
  </test>

</script>

JavaScript

riot.mount('*')