avrahamcool

<template>
  <button click.trigger="resetBySetting0()">resetBySetting0</button>
    <button click.trigger="resetByNewReference()">resetByNewReference</button>
  <button click.trigger="add()">add</button>
  <p>items.length = ${items.length}</p>
  <p repeat.for="item of items">${item.name}</p>
</template>

avrahamcool

<template>
  
  <style>
    .dummy
    {
      display: none;
    }
  </style>
  input type number (max = 99): <input type="number" max="99" value.bind="val" />
  <input class="dummy" type="range" max="99" value.bind="val" />

avrahamcool

<template>
  <require from="materialize/dist/css/materialize.css"></require>
  <style>
    [md-datepicker] + i.material-icons.std-icon-fixup {
      margin-left: -24px;
      line-height: 1;
      margin-top: 12px;
      cursor: pointer;
    }
  </style>

avrahamcool

<template>
  <require from="materialize/dist/css/materialize.css"></require>
  <div>
      <div>
        <p><a md-button href="#modal1">show modal from 60% to 70%</a></p>
        <p><a md-button href="#modal2">show modal from 10% to 70%</a></p>
      </div>
      <div id="modal1" md-modal="
        dismissible: true;
        in-duration: 500;

avrahamcool

<template>
  <require from="materialize/dist/css/materialize.css"></require>
  <div class="row">
    <div style="margin-bottom: 10px;">
      <button md-button click.delegate="selectTab2()">select tab 2</button><br /><br />
      Selected tab: ${demotabs.selectedTab | stringify}
    </div>

    <ul md-tabs md-tabs.ref="demotabs" class="z-depth-1">
      <li md-waves="color: primary;"><a class="active" href="#tab_1">Tab 1</a></li>

avrahamcool

<template>
  <div>
    <md-input md-label="put some text here" md-value.bind="textValue" md-char-counter="length: 120;"></md-input><br />
    You entered: ${textValue}<br />
    <button md-button="flat: true;" md-waves class="accent-text" click.delegate="setText()">set text to something</button>
  </div>
</template>

avrahamcool

<template>
  <require from="./working"></require>
  <require from="./not-working"></require>
  <p>
    <button md-button click.delegate="showNotWorking = true">Show (Not Working)</button>
    <button md-button click.delegate="showNotWorking = false">Hide</button>
  </p>
  <p>
    <button md-button click.delegate="showWorking = true">Show (Working)</button>
    <button md-button click.delegate="showWorking = false">Hide</button>

avrahamcool

<template>
  <require from="./my-component-not-working"></require>
  <p><button md-button click.delegate="showComponentNotWorking = true">show component who has a modal</button></p>
  <my-component-not-working if.bind="showComponentNotWorking"></my-component-not-working>
</template>

avrahamcool

Textareas don't autoresize

The reason for that is there's a "hiddendiv" created on document.ready() to determine the height of the resized textarea. That hidden div doesn't exist anymore when the sample app creates real textareas (see here). After Aurelia takes control, it replaces the content of its container (meaning aurelia-app="main").

The reference to hiddenDiv (a variable) is essentially broken once Aurelia kicks in. I'm not sure if there is any good workaround apart from creating such a div manually and outside of Aurelia scope.