jsobell/app.html

## app.html
<template>

<select multiple value.bind="displayStatus">
  <option repeat.for='foo of things' value="${foo.key}">${foo.key} | ${foo.value}</option>
</select>
Current status: ${displayStatus.length}

<hr/>

<select multiple value.bind="displayStatusObjects">
  <option repeat.for='foo of things' model.bind="foo.key">${foo.key} | ${foo.value}</option>
</select>
Current status: ${displayStatusObjects.length}
<pre>
  ${debug}
</pre>


<select value.bind="selectedLanguage" matcher.bind="languageComparer" change.delegate="switchLanguage()" class="form-control">
        <option repeat.for="language of languages" model.bind="language">${language.shortName}</option>
      </select>

Selected = ${selectedLanguage.id}

</template>

## app.js
import {observable} from 'aurelia-framework'

export class App {

    things = [
      { key:11, value:'AAAA'},
      { key:22, value:'BBBB'},
      { key:33, value:'CCCC'},
      { key:44, value:'DDDD'}
    ]

    displayStatus = null;
    displayStatusObjects = null;

  get debug() {
    return JSON.stringify(this.displayStatusObjects);
  }

  languages = [
    {"id":"3c42058e-638a-4b6b-bec5-50052e3a3c41","code":"EN","shortName":"en","name":"English","isDefault":false},
    {"id":"227e0905-8601-4ecd-9719-813638310fbd","code":"BG","shortName":"бг","name":"Български","isDefault":true}];

  selectedLanguage = {"id":"227e0905-8601-4ecd-9719-813638310fbd","code":"BG","shortName":"бг","name":"Български","isDefault":true};

  languageComparer = (langA, langB) => { console.log('comparing',langA.id,'to',langB.id); return langA.id === langB.id };

  switchLanguage = () => {};
}


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

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## mylocaltemplate.html
<template>
  HI, I'm a basic file!
</template>

## myview-strategy.js
import {Origin, protocol} from 'aurelia-metadata';
import {relativeToFile} from 'aurelia-path';
import {TemplateRegistryEntry} from 'aurelia-loader';
import {ViewEngine} from './view-engine';
import {ResourceLoadContext, ViewCompileInstruction} from './instructions';
import {DOM, PLATFORM} from 'aurelia-pal';

@viewStrategy()
export class MvcViewStrategy {
  /**
  * Creates an instance of TemplateRegistryViewStrategy.
  * @param moduleId The associated moduleId of the view to be loaded.
  * @param entry The template registry entry used in loading the view factory.
  */
  constructor(moduleId: string, entry: TemplateRegistryEntry) {
    this.moduleId = moduleId;
    this.entry = entry;
  }

  /**
  * Loads a view factory.
  * @param viewEngine The view engine to use during the load process.
  * @param compileInstruction Additional instructions to use during compilation of the view.
  * @param loadContext The loading context used for loading all resources and dependencies.
  * @return A promise for the view factory that is produced by this strategy.
  */
  loadViewFactory(viewEngine: ViewEngine, compileInstruction: ViewCompileInstruction, loadContext?: ResourceLoadContext): Promise<ViewFactory> {
    let entry = this.entry;

    if (entry.factoryIsReady) {
      return Promise.resolve(entry.factory);
    }

    compileInstruction.associatedModuleId = this.moduleId;
    return viewEngine.loadViewFactory(entry, compileInstruction, loadContext);
  }
}

## script.js
console.log('Hello World!');

## styles.css
/* todo: add styles */
	<template>

	<select multiple value.bind="displayStatus">
	<option repeat.for='foo of things' value="${foo.key}">${foo.key} \| ${foo.value}</option>
	</select>
	Current status: ${displayStatus.length}

	<hr/>

	<select multiple value.bind="displayStatusObjects">
	<option repeat.for='foo of things' model.bind="foo.key">${foo.key} \| ${foo.value}</option>
	</select>
	Current status: ${displayStatusObjects.length}
	<pre>
	${debug}
	</pre>



	<select value.bind="selectedLanguage" matcher.bind="languageComparer" change.delegate="switchLanguage()" class="form-control">
	<option repeat.for="language of languages" model.bind="language">${language.shortName}</option>
	</select>

	Selected = ${selectedLanguage.id}

	</template>
	import {observable} from 'aurelia-framework'

	export class App {

	things = [
	{ key:11, value:'AAAA'},
	{ key:22, value:'BBBB'},
	{ key:33, value:'CCCC'},
	{ key:44, value:'DDDD'}
	]

	displayStatus = null;
	displayStatusObjects = null;

	get debug() {
	return JSON.stringify(this.displayStatusObjects);
	}

	languages = [
	{"id":"3c42058e-638a-4b6b-bec5-50052e3a3c41","code":"EN","shortName":"en","name":"English","isDefault":false},
	{"id":"227e0905-8601-4ecd-9719-813638310fbd","code":"BG","shortName":"бг","name":"Български","isDefault":true}];

	selectedLanguage = {"id":"227e0905-8601-4ecd-9719-813638310fbd","code":"BG","shortName":"бг","name":"Български","isDefault":true};

	languageComparer = (langA, langB) => { console.log('comparing',langA.id,'to',langB.id); return langA.id === langB.id };

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

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	import {Origin, protocol} from 'aurelia-metadata';
	import {relativeToFile} from 'aurelia-path';
	import {TemplateRegistryEntry} from 'aurelia-loader';
	import {ViewEngine} from './view-engine';
	import {ResourceLoadContext, ViewCompileInstruction} from './instructions';
	import {DOM, PLATFORM} from 'aurelia-pal';

	@viewStrategy()
	export class MvcViewStrategy {
	/**
	* Creates an instance of TemplateRegistryViewStrategy.
	* @param moduleId The associated moduleId of the view to be loaded.
	* @param entry The template registry entry used in loading the view factory.
	*/
	constructor(moduleId: string, entry: TemplateRegistryEntry) {
	this.moduleId = moduleId;
	this.entry = entry;
	}

	/**
	* Loads a view factory.
	* @param viewEngine The view engine to use during the load process.
	* @param compileInstruction Additional instructions to use during compilation of the view.
	* @param loadContext The loading context used for loading all resources and dependencies.
	* @return A promise for the view factory that is produced by this strategy.
	*/
	loadViewFactory(viewEngine: ViewEngine, compileInstruction: ViewCompileInstruction, loadContext?: ResourceLoadContext): Promise<ViewFactory> {
	let entry = this.entry;

	if (entry.factoryIsReady) {
	return Promise.resolve(entry.factory);
	}

	compileInstruction.associatedModuleId = this.moduleId;
	return viewEngine.loadViewFactory(entry, compileInstruction, loadContext);
	}
	}