Alexander-Taran

<template>
  <ul>
    <li><a route-href="route: page1; params.bind: {id:1}">page1</a></li>
    <li><a route-href="route: page2; params.bind: {id:2}">page2</a></li>
  </ul>
  <router-view></router-view>
</template>

Alexander-Taran

<template>
  <h1>${message}</h1>
  <div repeat.for="i of 10000">
    <button mouseover.delegate="hover($index)"  click.delegate="click($index)">click me</button>
  </div>
  
</template>

Alexander-Taran

<template>
  <h1>${message}</h1>
  <input value.bind="boo"/>
  <div data-something.bind="boo">hey</div>
</template>

Alexander-Taran

<template>
  <require from='./theme-selector'></require>
   <require from='./theme-viewer'></require>
  
  <h1>${message}</h1>
  <theme-selector></theme-selector>
  <theme-viewer></theme-viewer>
</template>

Alexander-Taran

<template>
  <require from="boo"></require>
  <h1>${message}</h1>
  <boo></boo>
  <div as-element="boo"></div>
</template>

Alexander-Taran

<template>
  <h1>Referencing other fields in repeat.for of another field</h1>
  <p>Even though randoms is updated, times repeat isn't re-rendered since randoms isn't watched in that loop.</p>
  <p>To re-render the times loop, we need to use a signal to refresh the UI.</p>
  <h2>Times</h2>
  <ul>
    <li repeat.for='time of times'>
      # ${$index} Time - ${time} <-> Random - ${randoms[$index] }
    </li>
  </ul>

Alexander-Taran

<template>
  <require from="./c.css"></require>
  a.html
</template>

Alexander-Taran

<template>
        <div class="row" repeat.for="option of options">
            <div class="col">
                <div class="form-group">
                    <div class="form-check">
                        <input checked.bind="option.showThis" change.delegate="saveMe(option,$index)" type="checkbox">
                        <label class="form-check-label">
                            ${option.friendlyName}
                        </label>
                    </div>

Alexander-Taran

<template>

  <h1>${message}</h1>
  <a href="#">home</a>
  <a href="#/boo">boo</a>
  <a href="#/same/123">same with param</a>
  <router-view>
    
  </router-view>
</template>

Alexander-Taran

<template>

	<template if.bind="!editing">
		<h2>${items.length} items!</h2>
		<ul>
			<li repeat.for="item of items">
				${item.name}
			</li>
		</ul>
		<button click.delegate="toggleEditing()">Edit</button>