sebastien-roch
2/8/2017 - 10:35 PM

Vertical binding updates

Vertical binding updates

index.html
content_copyfile_download
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </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>
data-input.js
content_copyfile_download
import {bindable} from 'aurelia-framework';
import {App} from './app';

export class DataInputCustomElement {
  @bindable() model;
  app;

  static inject = [App];

  constructor(app) {
    // app is used in the template
    this.app = app;
  }
}
data-input.html
content_copyfile_download
<template>
  <div><label>${model.name}<input type="text" value.bind="app.data.valueMap[model.name]"/></label></div>
</template>
app.js
content_copyfile_download
import {bindable, BindingEngine} from 'aurelia-framework';

export class App {
  inputs = [];
  data;
  
  static inject = [BindingEngine];
  
  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
  }
  
  bind() {
    this.initData();
    this.bindingEngine.propertyObserver(this.data, 'valueMap').subscribe(this.onDataChange.bind(this))
  }
  
  onDataChange() {
    // this is never called :-(
    
    // do some computations here based on what changed.
    
    // update this.data according to computations results.
    // This updated data should be reflected in the inputs.
  }
  
  initData() {
    this.inputs = [
      {name: 'input1'},
      {name: 'input2'}
    ];
    
    this.data = {
      valueMap: {
        input1: '',
        input2: ''
      }
    }
  }
  
}
app.html
content_copyfile_download
<template>
  
  <require from="./data-input"></require>
  <data-input repeat.for="anInput of inputs" model.bind="anInput"></data-input>
</template>