ViewEngineHooks Aurelia example

countries.js

// Here's an example from Rob Eisenberg
// filename: resources/data/countries.js

import {viewEngineHooks} from 'aurelia-templating';

let countries = [
  { abbreviation: "AF", name: "Afghanistan" },
  { abbreviation: "AL", name: "Albania" },
  { abbreviation: "DZ", name: "Algeria" },
  ...
];

@viewEngineHooks()
export class CountryBinder {
  beforeBind(view) {
    view.overrideContext.countries = countries;
  }
}

// view template filename: account.html

<template class="user-detail" bindable="controller"> 
  <require from="resources/data/countries"></require>

  ...
   <div class="form-group">
      <label class="col-sm-2 control-label">Country</label>
      <div class="col-sm-3">
      <select class="form-control">
         <option value="" selected="selected">(please select a country)</option>
         <option repeat.for="country of countries" value.bind="country.abbreviation">${country.name}</option>
      </select>
   </div>
</div>
  ...

</template>