bigopon

<template>
  <style>greeting-test { display: block; padding: 5px; background: deepskyblue; margin-bottom: 5px; }</style>
  <greeting-test message='Hello World'></greeting-test>
  <greeting-test message.bind='message'></greeting-test>
  
  <input value.bind='message' />
  
  <hr/>
  Message 2 two-way binding
  <greeting-test message.two-way='message2'></greeting-test>

bigopon

<template>
  <style>
    .input-wrap { display: block; padding: 5px; background: #dedede; border: 1px solid #eee; }
    .input-wrap + .input-wrap { margin-top: 10px; }
    b { font-weight: bold; }
    [m-t-5] { margin-top: 5px; }
  </style>
 
  <div class='input-wrap'>
    <b>bindable (Cursor reset)</b>

bigopon

<template>
  <require from='./dynamic-input.htm'></require>
  <style>
    .input-wrap { display: block; padding: 5px; background: #dedede; border: 1px solid #eee; }
    .input-wrap + .input-wrap { margin-top: 10px; }
    .input-wrap > * { padding-top: 5px; }
    fieldset { margin: 5px; padding: 5px; border: 1px solid #999; }
    dynamic-input { display: block; }
  </style>
 

bigopon

<template>
  <require from='./dynamic-input.htm'></require>
  <style>
    .input-wrap { display: block; padding: 5px; background: #dedede; border: 1px solid #eee; }
    .input-wrap + .input-wrap { margin-top: 10px; }
    .input-wrap > * { padding-top: 5px; }
    fieldset { margin: 5px; padding: 5px; border: 1px solid #999; }
    dynamic-input { display: block; }
  </style>
 

bigopon

<template>
  <require from='./my-input.html'></require>
  <style>
    .input-wrap { display: block; padding: 5px; background: #dedede; border: 1px solid #eee; }
    .input-wrap + .input-wrap { margin-top: 10px; }
    b { font-weight: bold; }
    [m-t-5] { margin-top: 5px; }
  </style>
 
  <div class='input-wrap'>

bigopon

<template>
  <require from="./my-canvas"></require>
  
  <select value.bind='drawInstruction'>
    <option repeat.for='draw of draws' value.bind='draw'>${draw}</option>
  </select>
  
  <my-canvas draw-instruction.bind='drawInstruction'></my-canvas>
</template>

bigopon

<template>
  <require from="./datepicker"></require>
  
  <br/>
  <br/>
  
  <date-picker date.two-way='date'></date-picker>
  <hr/>
  <b>Date in app view model: ${date}</b>
</template>

bigopon

<template>
  
  
  <a href.bind='url' ref='anchor'>Url is "${url}"</a>
  
  <div>
  </div>
  
  <button click.delegate='url = "https://google.com"'>Home</button>
  <hr/>

bigopon

<template>
  <require from='./my-input.html'></require>
  <style>
    b { font-weight: bold; }
    input { display: block; width: 100%; } 
  </style>
  <style>
    .input-wrap { display: block; padding: 5px; background: #dedede; border: 1px solid #eee; }
    .input-wrap + .input-wrap { margin-top: 10px; }
    b { font-weight: bold; }

bigopon

<template>
  <require from="let"></require>
  
  <let foo="bar + message"></let>
  
  <input value.bind='bar' />
  <input value.bind='foo' />
  
  ${message}
</template>