Aurelia Gist .ref binding command examples

app.css

body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  margin-bottom: 30px;
}

.list {
  display: block;
  margin: 20px 0px;
  overflow: hidden;
}

.list list-item {
  float: left;
}

.small-width {
  width: 200px;
}

.button-container button-element {
  display: block;
  margin: 15px 0px;
}

section {
  margin: 60px 0px;
}

.green-div {
  cursor: pointer;
  color: white;
  padding: 20px 10px;
  background-color: darkseagreen;
}

app.html

<template>
  <require from="button-element"></require>
  <require from="list-item"></require>
  
  <require from="scroll-end"></require>
  <require from="notify-me"></require>
  <require from="app.css"></require>
  
  <h1>The .ref binding command</h1>
  
  <section>
    <h2> Example for using expressions</h2>
    <div class="list" ref="bindings.ref">
      <list-item repeat.for="i of listItems" value.bind="i" ref="bindingArray[$index]"></list-item>
    </div>
    <p>
     Prints the bindingArray and object to the developer console 
    </p>
    <button click.delegate="printRef()">print references</button>
  </section>

  <!-- ----------------- Reference element ----------------- -->
  <section>  
    <h2>Reference Element</h2>
  
    <div class="list" ref="listRef">
      <list-item repeat.for="i of listItems" value.bind="i"></list-item>
    </div>
    
    <p>
      Color list background and change width
    </p>
    <button click.delegate="colorListItem()">Color list</button>
    
    
    <div class="list" element.ref="listElementRef">
      <list-item repeat.for="i of listItems" value.bind="i"></list-item>
    </div>
    
    <p>
      Delete the first child DOM element
    </p>
    <button click.delegate="removeFirstItem()">Remove first item</button>
  
  </section>
  
  
  <!-- ----------------- Reference View ----------------- -->
  <section>  
    <h2>Reference View Instance</h2>
  
    <list-item view.ref="viewRef" value.bind="42"></list-item>
    
    <p>
      Call the multiplyValue method in view model of the list-view
    </p>
    
     <button click.delegate="multiplyValueOverView()">Multiply value</button>
    
  </section>
  
  <!-- ----------------- Reference View Model ----------------- -->
  <section>
    <h2>Reference View Model</h2>
    
    <button-element text="this is some text" view-model.ref="vmRef"></button-element>
    
    <p>
      Change the buttonText object.
    </p>
    <button click.delegate="changeButtonLabels()">Change Button Labels</button>
    
    <p>
      Show a alert popup with the internal 'showText' state.
    </p>
    <button click.delegate="getButtonState()">Show state</button></button>
  </section>
  
  <!-- ----------------- Reference Attribute View Model ----------------- -->
  <section>  
    <h2>Reference Attribute</h2>
  
    <div notify-me="message:you clicked the green div" notify-me.ref="attributeRef" class="green-div">
      I am a clickable div
    </div>
    
    <p>
      Change message that is shown when clicking the div
    </p>
    <button click.delegate="changeNotifyMessage()">Change message</button>
    
    <p>
      Add a span to the div element
    </p>
    
    <button click.delegate="addText()">Add text</button>
  
  </section>
  
  <!-- ----------------- Reference controller ----------------- -->
  
  <section>
    <h2>Reference Controller </h2>
    
    <list-item controller.ref="ctrlRef" value.bind="42"></list-item>
  
    <p>
      Call multiplyValue over the view model
    </p>
    <button click.delegate="callMultiplyValue()">Multiply value</button>
    
  </section>
</template>

app.js

export class App {
  listItems = 6;
  
  /* Use expression */
  bindingArray = [];
  bindings = {
    ref: {}
  };
  
  printRef() {
    console.log('binding array: ', this.bindingArray, 'bindings object: ', this.bindings);
  }
  
  /* Reference Element */
  
  colorListItem() {
    this.listRef.style.setProperty('background-color', 'cornflowerblue');
    this.listRef.classList = this.listRef.classList + ' small-width';
  }
  
  removeFirstItem() {
    let childElements = this.listElementRef.getElementsByTagName('list-item')
    if (childElements.length > 0) {
      childElements[0].remove();
    }
  }
  
  /* Reference View Instance */
  
  multiplyValueOverView() {
    this.viewRef.bindingContext.multiplyValue();
  }
  
   
  /* Reference View Model */
  
  //this is no common .ref case, just an example. Something like this would be better handled over
  //a bindable that defines the button texts, because it is something to customize our custom component
  //and nothing we need a reference for.
  changeButtonLabels() {
    this.vmRef.buttonTexts = { true: 'Click me to hide text', false: 'Click me to show text' };
  }
  
  //this is a better example. We don´t want to manipulate our custom element because therefore we can use bindables
  getButtonState() {
    alert(`Is button-element showing text? ${this.vmRef.showText}`);
  }
  
  /* Reference attribute view model */
  
  changeNotifyMessage() {
    this.attributeRef.message = 'Hey Dude! Stop clicking me';
  }
  
  addText() {
     this.attributeRef.element.innerHTML = this.attributeRef.element.innerHTML + '<span>\\o/ </span>';
  }
  
 
  /* Reference Controller */
  
  callMultiplyValue() {
   this.ctrlRef.viewModel.multiplyValue();
  }
}

button-element.html

<template>
  <style>
    button-element button {
      color: white;
      background-color: #ccc;
      border: none;
      padding: 8px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 12px;
      margin: 4px 2px;
      cursor: pointer;
    }
  </style>
  <button click.delegate="showText = !showText">
    ${buttonTexts[showText]}
  </button>
  <p show.bind="showText">
    <b>${text}</b>
  </p>
</template>

button-element.js

import { bindable } from 'aurelia-framework';

export class ButtonElementCustomElement {
  
  @bindable text = 'I am just the default Text :/';
  
  showText = false;
  buttonTexts = { true : 'Hide text', false: 'Show text'}
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </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>

list-item.html

<template>
  <style>
    list-item div {
      padding: 5px;
      margin: 5px;
      background-color: lightblue;
    }
  </style>
  <div>
    <span>${text}: ${value}</span>
  </div>
</template>

list-item.js

import { bindable } from 'aurelia-framework';

export class ListItemCustomElement {
  
  @bindable value;
  @bindable text = 'Value';
  
  multiplyValue(multiplyValue? = 2) {
    this.value = this.value * multiplyValue;
  }
}

notify-me.js

import { bindable , inject } from 'aurelia-framework';

@inject(Element)
export class NotifyMeCustomAttribute {
  
  @bindable message;
  element;
  
  constructor(element) {
    this.element = element;
  }
  
  attached() {
    //Actual we would achieve the same functionality with <div onclick="alert('message')">
    //but imagin we would use some ultra advanced dialog/message/toast/modal service here to inform the user,
    //send him an E-Mail, subscribe him to a newsletter and much more
    
    this.element.addEventListener('click', () => {
        alert(this.message);
    });
  }
  
  
}

scroll-end.js

import { bindable , inject } from 'aurelia-framework';

@inject(Element)
export class ScrollEndCustomAttribute {
  
  @bindable load;
  element;
  
  constructor(element) {
    this.element = element;
  }
  
  attached() {
    this.element.addEventListener('scroll', () => {
        if (this.element.scrollTop + this.element.offsetHeight >= this.element.scrollHeight) {
            this.load();
        }  
    });
  }
}