Thanood · April 1, 2016 09:54
diff --git a/app.html b/app.html
 <template>
  
  <select class="form-control" value.bind="selectedValue">
                    <option>Select value</option>
                    <option repeat.for="value of values" model.bind="value">${value.Name} </option>
                </select>
 </template>
diff --git a/app.js b/app.js
 import {inject, bindable} from 'aurelia-framework';
 import {BindingEngine} from 'aurelia-binding';
 @inject(BindingEngine)
 export class App {
    constructor(bindingEngine) {
      this.values = [{ Id: 2, Name: 'A', Email: 'B' }, { Id: 3, Name: 'B', Email: 'B' }];
      this.selectedValue = { Id: 1, Name: 'default', Email: 'default' };
      this.valuesubscription = bindingEngine.propertyObserver(this, 'selectedValue')
            .subscribe(this.selectedValueChanged);
    }
    
  selectedValueChanged(){
    console.log('selected value changed');
  }
 }
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>

	<select class="form-control" value.bind="selectedValue">
	<option>Select value</option>
	<option repeat.for="value of values" model.bind="value">${value.Name} </option>
	</select>
	</template>
	import {inject, bindable} from 'aurelia-framework';
	import {BindingEngine} from 'aurelia-binding';
	@inject(BindingEngine)
	export class App {
	constructor(bindingEngine) {
	this.values = [{ Id: 2, Name: 'A', Email: 'B' }, { Id: 3, Name: 'B', Email: 'B' }];
	this.selectedValue = { Id: 1, Name: 'default', Email: 'default' };
	this.valuesubscription = bindingEngine.propertyObserver(this, 'selectedValue')
	.subscribe(this.selectedValueChanged);
	}

	selectedValueChanged(){
	console.log('selected value changed');
	}
	}
	<!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';
	}