freshcutdevelopment

import {bindable, processContent} from 'aurelia-templating';
import {FEATURE} from 'aurelia-pal';

//This custom attribute was created by Jeremy Danyow as a part of this
//stackoverflow answer https://stackoverflow.com/questions/43306744/using-custom-element-content-as-item-template/43325889#43325889
@processContent(makePartReplacementFromContent)
export class ListGroup {
  @bindable itemsSource = null;
  @bindable defaultValue = model => "";
}

freshcutdevelopment

<template>
  <require from="style.css"></require>
  <require from="list-group"></require>
  <require from="pokemon.html"></require>
  
  <section>
    <h1>${message}</h1>
    
    <hr/>
    <h3>custom template</h3>

freshcutdevelopment

import {inlineView} from 'aurelia-framework';

@inlineView(`<template>
              <button type="button" class="btn btn-outline-success" 
                      click.delegate="showAlert()">Success
              </button>
             </template>`)
export class AlerterInline{
  
    showAlert(){

freshcutdevelopment

<template>
  <require from="./inspect-binding-behavior"></require>
  <require from="./style.css"></require>
  
  <section>
  <h1>${message & inspect}</h1>
  
  <hr/>
  
  <input value.bind="message & inspect"></input>

freshcutdevelopment

import {EventAggregator} from 'aurelia-event-aggregator';
import {inject} from 'aurelia-framework';

@inject(EventAggregator)
export class App{
  
  constructor(eventAggregator){
    this.eventAggregator = eventAggregator;
  }

freshcutdevelopment

 <template>
    <h2>Greetings</h2>
    <hr/>
    <ul>
       <li repeat.for="greeting of greetings"> 
           ${greeting}
       </li>
    </ul>
  <hr/>
  <!-- add default two-way binding to a new greeting property -->  

freshcutdevelopment

import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator'; //import the EventAggregator class
import {GreeterService} from './services/greeter-service.js';

@inject(GreeterService, EventAggregator)
export class Greeter{
  constructor(greeterService, eventAggregator){
    this.greeterService = greeterService;
    this.eventAggregator = eventAggregator;
  }

freshcutdevelopment

export class GreetingService{
   loadGreetings(){
    return ['Hello', 'Welcome', 'Good tidings', 'Good morning'];
  }
 }

freshcutdevelopment

 <template>
    <h2>Greetings</h2>
    <hr/>
    <ul>
       <li repeat.for="greeting of greetings"> <!-- loop over each greeting, rendering an li -->
           ${greeting} <!-- render the greeting using one-way binding -->
       </li>
    </ul>
 </template>

freshcutdevelopment

import {inject} from 'aurelia-framework';
import {GreeterService} from './services/greeter-service.js';

@inject(GreeterService)
export class Greeter{
  constructor(greeterService){
    this.greeterService = greeterService;
  }
  attached(){ //called when the greeter component is attached to the DOM
    this.greetings = this.greeterService.loadGreetings();