Merge branch 'feature/basic-combo-box'

src/combo.html

@@ -0,0 +1,8 @@
+<template>
+  <div class="form-group">
+    <label for="lookupField" class="control-label">${title}</label>
+    <select class="form-control">
+      <option repeat.for="option of options" value="${option.value}" selected.one-time="$parent.selected === option.value">${option.description}</option>
+    </select>
+  </div>
+</template>

src/combo.js

@@ -0,0 +1,38 @@
+import {customElement, inject, bindable, bindingMode} from 'aurelia-framework';
+
+@customElement('combo')
+@bindable({
+  name:'title',
+  attribute:'title',
+  defaultBindingMode: bindingMode.oneTime
+})
+@bindable({
+  name:'options',
+  attribute:'options',
+  defaultBindingMode: bindingMode.oneTime
+})
+@bindable({
+  name:'selected',
+  attribute:'selected',
+  defaultBindingMode: bindingMode.twoWay
+})
+@inject(Element)
+export class Combo {
+  constructor(element) {
+    this.element = element;
+    this._boundChange = this._change.bind(this);
+  }
+
+  attached() {
+    this.combo = this.element.querySelector('select');
+    this.combo.addEventListener('change', this._boundChange);
+  }
+
+  detached() {
+    this.combo.removeEventListener('change', this._boundChange);
+  }
+
+  _change(change) {
+    this.selected = change.target.value;
+  }
+}

src/index.js

@@ -1,3 +1,3 @@
 export function configure(aurelia) {
-	aurelia.globalResources(['lookup-widget','autocomplete-widget']);
+	aurelia.globalResources(['lookup-widget','autocomplete-widget', 'combo']);
 }

src/lookup-widget.html

@@ -1,6 +1,6 @@
 <template>
-
+  <div class="form-group">
     <label for="lookupField" class="control-label">${title}</label>
     <input type="text" id="lookupField">
-
+  </div>
 </template>