bigopon

<template>
  <compose view-model.bind='level1ViewModel'></compose>
</template>

bigopon

<template>
  <h1>${message}</h1>
  <compose view-model.bind='level1ViewModel'></compose>
</template>

bigopon

'use strict';

function log(message) {
  document.getElementById('status').textContent += message + '\n';
}
log('running...');

const tests = [
  null, undefined, 0, 1, true, false, '', 'adsfasf', new String('test'), {}, Object.create(null), Object.prototype, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {},
  null, undefined, 0, 1, true, false, '', 'adsfasf', new String('test'), {}, Object.create(null), Object.prototype, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {}, function() {},

bigopon

<template>
  <button click.trigger="items.push({ text: 'I am a new message no.' + items.length }) && scroll()">Add</button>
  <div style='height: 400px; overflow: auto' ref='wrapper'>
    <div repeat.for="item of items" style='height: 70px; margin: 10px; border: 1px solid #585'>
      ${item.text}
    </div>
  </div>
</template>

bigopon

<template>
  <require from="./autocomplete"></require>
  <form>
    <label class="form-component">
      Country:<br/>
      <autocomplete service.bind="suggestionService.country" 
                    value.bind="model.country"
                    placeholder="Enter country..."
                    change.delegate="model.city = null">
      </autocomplete>

bigopon

<template>
  <require from='./self'></require>
  <h1>${heading}</h1>
  <button type="button" click.delegate="toggleIsChecked() & self">
      <input type="checkbox" checked.bind="isChecked"> ${isChecked}
  </button>
</template>

bigopon

<template>
  <style>
    .active {
      border-color: blue;
    }
  </style>
  <form blur.capture="currentFieldSet = null"
        focus.capture="currentFieldSet = $event.target.closest('fieldset')">
    
    <h1>Order Pizza:</h1>

bigopon

<template>
  <require from="./on-key"></require>
  <div>
    Press [<b>Ctrl + Enter</b>] in textbox <br/>
    Or [<b>Alt + Click</b>] it to trigger event
  </div>
  <input
    value.bind="message"
    keyup.delegate="textEntered() & keys:'ctrl':13"
    mousedown.delegate="textClicked() & keys:'alt'"

bigopon

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

bigopon

<template>
  <require from="./debounce2"></require>
  <require from='./throttle2'></require>
  <style>
    label {
      display: block;
      margin: 16px 0;
    }
    input {
      display: block;