jdanyow

<template>
  <div data-t="${message}">${message}</div>
  
  <h1>Debug</h1>
  div.getAttribute('data-t') = '${dataTgetAttribute}'<br/><br/>
  div['data-t'] = '${dataTAccessMember}'<br/><br/>
  Markup:<br/>
  <div><pre><code>${html}</code></pre></div>
</template>

jdanyow

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

jdanyow

<template>
  <require from="./save-binding-behavior"></require>
  
  <input value.bind="instance.foo & save">
  ${instance.foo}
  
  <ul>
    <li repeat.for="save of saves">${save}</li>
  </ul>
</template>

jdanyow

<template>
  <require from="./simple-repeat"></require>
  
  <div simple-repeat.bind="data">
    ${firstName}
  </div>
</template>

jdanyow

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

jdanyow

<template>
  <div repeat.for="item of items">
    <label>
      ${item.value}:
      <input type="number"
             value.one-way="item.index"
             change.delegate="updateIndex(item, $event.target.value)">
    </label>
  </div>
</template>

jdanyow

<template>
  <require from="./sorter"></require>
  <h1>Hello World</h1>  
  <p>Problem: Pressing + or - will not sort the items</p>
  <ul>
    <li repeat.for="item of list | sort:'index':'ascending'">
      ${item.name}: ${item.index}
      <button click.delegate="item.index = item.index + 1 ">+</button>
      <button click.delegate="item.index = item.index - 1 ">-</button>
    </li>

jdanyow

<template>
  <ul>
    <li repeat.for="item of list">
      ${item.name}: ${item.index}
      <button click.delegate="increment(item)">+</button>
      <button click.delegate="decrement(item)">-</button>
    </li>
  </ul>
  
  <button click.delegate="add()">Add new item with index value 2, (force sorting)</button>

jdanyow

<template>
  <form>
    <label>view: <textarea value.bind="viewHtml" rows="8" cols="80"></textarea></label>
    <label>view-model: <textarea value.bind="viewModelJs" rows="8" cols="80"></textarea></label>
    <button type="submit" click.delegate="submit()">Submit</button>
    <button type="button" click.delegate="remove()">Remove</button>
  </form>
  <div ref="container"></div>
</template>

jdanyow

<template>
  <require from="keys-value-converter"></require>
  
  <div repeat.for="k of obj | keys">
    ${obj[k]}
  </div>
</template>