Thanood · April 1, 2016 09:25
diff --git a/app.html b/app.html
 <template>
  <require from="./my-element"></require>
  <require from="./my-attribute"></require>
  
  <my-element my-attribute foo.bind="initial"></my-element>
  <!--<paging num="6"></paging>-->
  
 </template>
diff --git a/app.js b/app.js
 export class App {
  initial = 'initial value';
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <title>Aurelia</title>
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.11.10/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.11.10/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
 </html>
diff --git a/main.js b/main.js
 /*******************************************************************************
 * The following two lines enable async/await without using babel's
 * "runtime" transformer. Uncomment the lines if you intend to use async/await.
 * 
 * More info here:  https://github.com/jdanyow/aurelia-plunker/issues/2
 */
 //import regeneratorRuntime from 'babel-runtime/regenerator';
 //window.regeneratorRuntime = regeneratorRuntime;
 /******************************************************************************/

 export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  aurelia.start().then(a => a.setRoot());
 }
diff --git a/my-attribute.js b/my-attribute.js
 import { inject } from 'aurelia-framework';

 @inject(Element)
 export class MyAttributeCustomAttribute {
  constructor(element) {
    this.element = element;
  }
  
  attached() {
    window.setTimeout(() => {
      this.element.au['my-element'].viewModel.foo = 'changed';
    }, 2000);
  }
 }
diff --git a/my-element.html b/my-element.html
 <template>
  <input type="text" value.bind="foo" />
 </template>
diff --git a/my-element.js b/my-element.js
 import {bindable} from 'aurelia-framework';

 export class MyElement {
  @bindable() foo = '5';
 }
diff --git a/styles.css b/styles.css
 /* Styles go here */
	<template>
	<require from="./my-element"></require>
	<require from="./my-attribute"></require>

	<my-element my-attribute foo.bind="initial"></my-element>
	<!--<paging num="6"></paging>-->

	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<link rel="stylesheet" href="styles.css">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.11.10/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-plunker/v0.11.10/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	/*******************************************************************************
	* The following two lines enable async/await without using babel's
	* "runtime" transformer. Uncomment the lines if you intend to use async/await.
	*
	* More info here: https://github.com/jdanyow/aurelia-plunker/issues/2
	*/
	//import regeneratorRuntime from 'babel-runtime/regenerator';
	//window.regeneratorRuntime = regeneratorRuntime;
	/******************************************************************************/

	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();

	aurelia.start().then(a => a.setRoot());
	}
	import { inject } from 'aurelia-framework';

	@inject(Element)
	export class MyAttributeCustomAttribute {
	constructor(element) {
	this.element = element;
	}

	attached() {
	window.setTimeout(() => {
	this.element.au['my-element'].viewModel.foo = 'changed';
	}, 2000);
	}
	}
	import {bindable} from 'aurelia-framework';

	export class MyElement {
	@bindable() foo = '5';
	}