charlespockert

<template>
    <div class="input-group date">
        <input type="text" value.bind="value" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
</template>

charlespockert

import {inject, customAttribute, bindable} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';
import * as kendoUi from 'kendo-ui';
import 'kendo-ui/styles/kendo.common-bootstrap.min.css!';
import 'kendo-ui/styles/kendo.bootstrap.min.css!';

@customAttribute('kendo-autocomplete')
@inject(Element, HttpClient)
export class KendoAutocomplete {

charlespockert

import {inject, ViewCompiler, ViewResources, Container} from 'aurelia-framework';

/**
 * Compiler service
 *
 * compiles an HTML element with aurelia
 */
@inject(ViewCompiler, ViewResources, Container)
export class Compiler {

charlespockert

<require from="test"></require>
<test></test>

charlespockert

<template>
    <ul class="nav nav-tabs">
        <li role="presentation" click.delegate="$parent.selectTab(tab)" repeat.for="tab of tabs" class="${ $parent.selectedTab === tab ? 'active' : '' }"><a href="#">${ tab.heading }</a></li>
    </ul>
    <div style="margin-top:8px">
        <content></content>
    </div>
</template>

charlespockert

export class TestValueConverter {
    toView(value, selected, rebind) {
        console.log("Running value converter");

        return value.filter(val => {

            var found = false;

            selected.forEach(sel => {
                if (val.toLowerCase().indexOf(sel) > -1)

charlespockert

<template>
  <section class="au-animate">
    <div class="well">
      <content select="#navigation"></content>
    </div>
    <div>
      <content select="#content"></content>
    </div>
  </section>
</template>

charlespockert

<template>
  <require from="tbind.js"></require>
  <h1>${message}</h1>
  <h2>${prop}</h2>
  <div>${'val1' & t2}</div>
  <div>${'val1' & t2}</div>
  <div>${'val1' & t2}</div>
  <hr/>
  <div>
   <compose containerless view.bind="'custom-view.html'"></compose>

charlespockert

<template>
  <require from="tbind.js"></require>
  <h1>${message}</h1>
  <h2>${prop}</h2>
  <div>${'val1' & t & debounce}</div>
  <div>${'val1' & t & throttle}</div>
  <div>${'val1' & t}</div>
  <hr/>
  <div>
   <compose containerless view.bind="'custom-view.html'"></compose>

charlespockert

<template>
  <h1>${message}</h1>
  <div>${val1 & t & debounce}</div>
  <div>${val1 & t & throttle}</div>
  <div>${(val1) & t }</div>
  <hr/>
  <div>
   <compose containerless view.bind="'custom-view.html'"></compose>
  </div>
  <hr/>