mattduffield · October 7, 2016 18:26
diff --git a/app.html b/app.html
 <template>
  <h1>${title}</h1>
  <compose view-model="dynamic"></compose>
 </template>
diff --git a/app.js b/app.js
 export class App {
  title = 'Dynamic Screens'
 }
diff --git a/dynamic.js b/dynamic.js
 import {InlineViewStrategy} from  'aurelia-templating';
import {ViewService} from './view-service';

export class Dynamic {
  static inject = [ViewService];
  
  controller;
  
  constructor(viewService) {
    this.viewService = viewService;
  }

  getViewStrategy() {
    let template = this.viewService.getView('data-entry');
    this.controller = template;
    let vs = new InlineViewStrategy(template.view, this);
    return vs;
  }
}
diff --git a/index.html b/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://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>
diff --git a/view-service.js b/view-service.js
 /**
 * Provides view markup.
 *
 * @class ViewService
 */
export class ViewService {

  constructor() {
    this.views = [];
    this.initViews();
  }

  getView(name) {
    return this.views.find((v) => {
      return v.name === name;
    })
  }

  initViews() {
    this.views = [    
      {
        name: 'simple',
        view: ` 
          <template>
            <h2>Inside simple dynamic template!</h2>
          </template>
        `
      },
      {
        name: 'data-entry',
        model: {
          heading: 'User Registration',
          username: ''
        },
        handlers: {
          submit: (payload) => {
            alert(`Saving ${payload}`);
          },
          cancel: (payload) => {
            alert('canceling');
          }
        },
        view: ` 
          <template>
            <form role="form"
              submit.delegate="controller.handlers.submit(controller.model.username)">
              <h1>\${controller.model.heading}</h1>
                <label for="username">Username</label>
                <input type="text" 
                  value.bind="controller.model.username" 
                  id="username" 
                  placeholder="User Name">
                <button type="submit">
                  Submit
                </button>
                <button type="button"
                  click.delegate="controller.handlers.cancel()">
                  Cancel
                </button>
            </form> 
          </template>
        `
      }
    ];
  }
}
	<template>
	<h1>${title}</h1>
	<compose view-model="dynamic"></compose>
	</template>
	<!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://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>