jdanyow/app.html

## app.html
<template>
  <require from="./select2-custom-attribute"></require>
  <require from="./debug"></require>

  <h1>Standard Select</h1>
  <select multiple value.bind="selectedThings" style="width: 100%">
    <option repeat.for="thing of things" model.bind="thing">${thing.name}</option>
  </select>

  <h1>Select2</h1>
  <select select2 multiple value.bind="selectedThings2" style="width: 100%">
    <option repeat.for="thing of things" model.bind="thing">${thing.name}</option>
  </select>

  <debug></debug>
</template>

## app.js
export class App {
  things = [
    { id: 0, name: 'foo' },
    { id: 1, name: 'bar'},
    { id: 2, name: 'baz'}];

  selectedThings = [];

  selectedThings2 = [];
}

## debug.js
import {inlineView} from 'aurelia-framework';

@inlineView('<template><pre><code>${json}</code></pre></template>')
export class Debug {
  bindingContext = null;

  updateJson() {
    if (this.bindingContext === null) {
      this.json = 'null';
    } else if (this.bindingContext === undefined) {
      this.json = 'undefined'
    } else {
      // todo: use a stringify function that can handle circular references.
      this.json = JSON.stringify(this.bindingContext, null, 2);
    }
  }

  bind(bindingContext) {
    this.bindingContext = bindingContext;
    this.updateJson();
    this.interval = setInterval(::this.updateJson, 150);
  }

  unbind() {
    this.bindingContext = null;
    clearInterval(this.interval);
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## select2-custom-attribute.js
import {customAttribute, inject} from 'aurelia-framework';
//import $ from 'jquery';
//import select2 from 'select2'; // install the select2 jquery plugin
//import from 'select2/css/select2.min.css' // ensure the select2 stylesheet has been loaded

@customAttribute('select2')
@inject(Element)
export class Select2CustomAttribute {
  constructor(element) {
    this.element = element;
  }

  attached() {
    $(this.element).select2(this.value)
      .on('change', () => this.element.dispatchEvent(new Event('change')));
  }

  detached() {
    $(this.element).select2('destroy');
  }
}
	<template>
	<require from="./select2-custom-attribute"></require>
	<require from="./debug"></require>

	<h1>Standard Select</h1>
	<select multiple value.bind="selectedThings" style="width: 100%">
	<option repeat.for="thing of things" model.bind="thing">${thing.name}</option>
	</select>

	<h1>Select2</h1>
	<select select2 multiple value.bind="selectedThings2" style="width: 100%">
	<option repeat.for="thing of things" model.bind="thing">${thing.name}</option>
	</select>

	<debug></debug>
	</template>
	export class App {
	things = [
	{ id: 0, name: 'foo' },
	{ id: 1, name: 'bar'},
	{ id: 2, name: 'baz'}];

	selectedThings = [];

	selectedThings2 = [];
	}
	import {inlineView} from 'aurelia-framework';

	@inlineView('<template><pre><code>${json}</code></pre></template>')
	export class Debug {
	bindingContext = null;

	updateJson() {
	if (this.bindingContext === null) {
	this.json = 'null';
	} else if (this.bindingContext === undefined) {
	this.json = 'undefined'
	} else {
	// todo: use a stringify function that can handle circular references.
	this.json = JSON.stringify(this.bindingContext, null, 2);
	}
	}

	bind(bindingContext) {
	this.bindingContext = bindingContext;
	this.updateJson();
	this.interval = setInterval(::this.updateJson, 150);
	}

	unbind() {
	this.bindingContext = null;
	clearInterval(this.interval);
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	import {customAttribute, inject} from 'aurelia-framework';
	//import $ from 'jquery';
	//import select2 from 'select2'; // install the select2 jquery plugin
	//import from 'select2/css/select2.min.css' // ensure the select2 stylesheet has been loaded

	@customAttribute('select2')
	@inject(Element)
	export class Select2CustomAttribute {
	constructor(element) {
	this.element = element;
	}

	attached() {
	$(this.element).select2(this.value)
	.on('change', () => this.element.dispatchEvent(new Event('change')));
	}

	detached() {
	$(this.element).select2('destroy');
	}
	}