jdanyow

<template>
  <require from="./child"></require>
  
  <button click.delegate="newItems()">new items</button>
  <child repeat.for="item of items" id.bind="item.id" value.bind="item.value"></child>
  
</template>

jdanyow

<template>
  <button click.delegate="toggleLine()">toggleLine</button><br/>
  <svg width="100" height="100">
    <line
      if.bind="line"
      x1.bind="line.sx"
      y1.bind="line.sy"
      x2.bind="line.ex"
      y2.bind="line.ey" stroke="black"></line>
  </svg>

jdanyow

<template>
    <button type="button" click.delegate="onChange($event, 'm1')">M1</button>
    <button type="button" click.delegate="onChange($event, 'm2')">M2</button>
    <button type="button" click.delegate="logModel($event)">Log</button>
    <compose view.bind="myView" model.bind="$this"></compose>
</template>

jdanyow

<template>

  <label>Car</label>
	<select value.bind="selectedCar">
		<option repeat.for="car of cars" model.bind="car">${car.name}</option>)
	</select>
	<br>
	Selected car: <b>${selectedCar.name}</b>
	<br>
	<button click.delegate="selectCar(0)">Select Audi</button>

jdanyow

<template>
  <router-view></router-view>
</template>

jdanyow

<template>
  <div if.bind="isLoading">
    <h1>Loading ...</h1>
  </div>
  <div if.bind="!isLoading">
    <h1>Done!</h1>
    <p ref="messageRef">${message}</p>
    <p>${messageRef}</p>
  </div>
</template>

jdanyow

<template>
  <h1>${value}</h1>
</template>

jdanyow

<template>
  <input type="text" list="myDatalist" input.delegate="selectedValue = findOption($event.target.value)" />
  <datalist id="myDatalist">
    <option repeat.for="option of options">${option.name}</option>
  </datalist>
  
  <pre style="margin-top: 100px"><code>${selectedValue}</code></pre>
</template>

jdanyow

<template>
  <require from="./grid/grid"></require>
  <require from="./grid/column"></require>

  <grid rows.bind="people">
    <column><template><td>index: ${$index}</td></template></column>
    <column><template><td>firstName: ${firstName}</td></template></column>
    <column><template><td>lastName: ${lastName}</td></template></column>
  </grid>
</template>

jdanyow

<template>
    <require from="./grid"></require>
    <require from="./grid-column"></require>
    <h2>Grid Test</h2>
    <div style="margin-bottom: 20px;">
        <button type="button" click.delegate="toggleNameColumn()">${buttonText}</button>
    </div>
    <grid items.bind="customers" grid.ref="customerGrid">
        <grid-column field="id" title="ID"></grid-column>
        <grid-column field="name" title="NAME"></grid-column>