mattduffield · October 7, 2016 17:33
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 {

  constructor() {
  }

  getViewStrategy() {
    let template = `
      <template>
        <h2>Inside dynamic template!</h2>
      </template>
    `;
    let vs = new InlineViewStrategy(template, 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 dynamic template!</h2>
          </template>
        `
      },
      {
        name: "data-entry",
        handlers: {
          submit: (result) => {
            this.settings = Object.assign(
              {}, this.settings, {'result': result});
            // alert(result);
            this.close(true, this.settings);
          },
          cancel: (result) => {
            this.close(false, result);
          }
        },
        view: ` 
          <template>
            <form role="form"
              submit.delegate="controller.handlers.submit(name)">
              <legend>\$\{model.heading\}</legend>
              <div class="form-group">
                <label for="fn">Action Name</label>
                <input type="text" value.bind="name" 
                  class="form-control" 
                  id="fn" 
                  placeholder="Action Name"
                  attach-focus>
              </div>
              <div class="form-group">
                <button type="submit" 
                  class="btn btn-primary">
                  Submit
                </button>
                <button type="button" 
                  class="btn btn-default"
                  click.delegate="controller.handlers.cancel()">
                  Cancel
                </button>
              </div>
            </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>