ajayvikas

<template>
  <style>
    label {display: block; padding: 4px 0;}
  </style>
  
  <hr/>
  <label>
    First Name: <input value.bind='firstName' />
  </label>
  <label>

ajayvikas

<template>
  <require from="./registration-form"></require>
  
  <registration-form></registration-form>
</template>

ajayvikas

<template>
    <require from="./summary"></require>
    <require from="./dynamic-comp"></require>
    <summary items.bind="summaryItems">
        <span style="background-color: skyblue">from app:</span>
    </summary>
    <dc></dc>
</template>

ajayvikas

<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>

ajayvikas

<template>
    <require from="./minesweeper.viewmodel"></require>
    <minesweeper game.bind="game" view-model.ref="minesweeper"></minesweeper>
    <ul class="actions">
        <li><a click.delegate="startNewGame()">New game</a></li>
        <li><a click.delegate="minesweeper.undo()" hidden.bind="!minesweeper.canUndo()">Undo</a></li>
    </ul>
</template>

ajayvikas

<template>
    <require from="./grid"></require>
    <require from="./grid-column"></require>
    <grid items.bind="orders">
        <grid-column field="id" title="ID"></grid-column>
        <grid-column field="rate" title="RATE"></grid-column>
        <grid-column field="qty" title="QTY"></grid-column>
        <grid-column field="amount" title="AMT"></grid-column>
    </grid>
</template>

ajayvikas

<template>
    <require from="./test"></require>
    <require from="./compose"></require>
    Works with custom element as node name
    <br/>
    <br/>
    <test>
        <div slot="slot1">
            Some slot content
        </div>

ajayvikas

<template>
  <div>
      <label>id</label>
      <label>rate</label>
      <label>qty</label>
      <span>amt</label>
  </div>
  <div repeat.for="order of orders">
      <label>${order.id}</label>
      <label>${order.rate}</label>