jsobell

<template>
Current status: ${chosenstatus.name}

<select class="form-control control-label" value.bind="chosenstatus">
  <option repeat.for="status of displayStatus" model.bind="user">
      ${status.name} </option>
 </select>


</template>

jsobell

<template>
  <require from='whatami'></require>
  <h1>X = ${x}</h1>
  <div ref='content'>
  <div whatami='12' class='${x}' imstillhere='aa' wheredidigo='${x}' data-what='${x}'>${x}</div>
  </div>
  
  <pre>
    ${content.innerHTML}
  </pre>

jsobell

<template>
<require from='./wizard'></require>

Wizard:
<wizard steps.bind="[{name: 'primero',title:'Primer paso'} ,{name:'segundo',title:'Segundo paso'}]">
<wizard-step>
    content 1
</wizard-step>
<wizard-step>
    content 2

jsobell

<template>
  <h1>${message}</h1>
  
<div class="checkbox" repeat.for="[k,v] of stuff">
  <label>${k} <input type="checkbox" checked.bind='v' change.delegate='toggle(k)' > </label>
</div>  

<ul>
  <li repeat.for="[k,v] of stuff">${k} ${v}</li>
</ul>

jsobell

<template>
  <ul>
    <li repeat.for='r of router.navigation'><a href='${r.href}'>Go to ${r.title}</a></li>
  </ul>
  <h1>${message}</h1>
  <router-view></router-view>
</template>

jsobell

import {sourceContext} from 'aurelia-binding';

export class DirtyBindingBehavior {
  bind(binding, source, frequency=500) {
    if (!binding.updateTarget) {
      throw new Error('Only property bindings and string interpolation bindings can be dirty checked.  Trigger, delegate and call bindings cannot be dirty checked.');
    }
    binding.dirtyTimer = setInterval(t => binding.call(sourceContext), frequency);
  }

jsobell

<template>

<select multiple value.bind="displayStatus">
  <option repeat.for='foo of things' value="${foo.key}">${foo.key} | ${foo.value}</option>
</select>
Current status: ${displayStatus.length}

<hr/>

<select multiple value.bind="displayStatusObjects">

jsobell

<template>

<select multiple value.bind="displayStatus">
  <option repeat.for='foo of things' value="${foo.key}">${foo.key} | ${foo.value}</option>
</select>
Current status: ${displayStatus.length}

<hr/>

<select multiple value.bind="displayStatusObjects">

jsobell

import {sourceContext} from 'aurelia-binding';

export class DirtyBindingBehavior {
  bind(binding, source, event, period=140) {
    if (!binding.updateTarget) {
      throw new Error('Only property bindings and string interpolation bindings can be dirty checked.  Trigger, delegate and call bindings cannot be dirty checked.');
    }
    binding.interceptedupdateTarget = binding.updateTarget;
    binding.updateTarget = (a) => { 
      if (this.isDirtyCheck(binding.value, a))

jsobell

<template>
  <ul>
    <li>
      Inspect Div A and Div B in dev tools
      and pay attention to their classes.
    </li>
    <li>
      Click all of the "click me" text and observe Div A and Div B classes change.
    </li>
  </ul>