Sean Hunter freshcutdevelopment

## app.html
<template>
  <link rel="stylesheet" type="text/css" href="style.css">
  <h1>${message}</h1>
  <hr/>
  <compose view="info-card.html"></compose>
</template>

## app.html
<template>
  <h1>${message}</h1>
</template>

## app.html
<template>
  <h1>${greeting}</h1>
  <form class="form-inline">
    <input class="form-control" placeholder="greeting..." value.bind="greeting"></input>
  </form>
</template>

## aurelia.json
{
  "name": "my-books",
  "type": "project:application",
  "platform": {
    "id": "web",
    "displayName": "Web",
    "output": "scripts",
    "index": "index.html"
  },
  "transpiler": {

## app.html
<template>
  <require from="./inspect-binding-behavior"></require>
  <require from="./style.css"></require>

  <section>
  <h1>${message & inspect}</h1>

  <hr/>

  <input value.bind="message & inspect"></input>

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS Transition Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="box"></div>
</body>

## aurelia.json
 ...
 "jquery",
    "text",
    {
      "name": "selectize",
      "main": "dist/js/standalone/selectize.js",
      "path": "../node_modules/selectize",
      "deps": [
        "jquery"
      ],

## install-selectize.sh
npm install jquery --save
npm install selectize --save
npm install flag-icon-css --save

## getHtml.js
  loadSelectItemView(templateUrl) {
    return this.viewEngine.loadViewFactory(templateUrl);
  }

  getHtml(item, factory) {
    const childContainer = this.container.createChild();
    const view = factory.create(childContainer);

    view.bind(item);

## ux-selectize-inline-render.js
 render: {
      option: (item, escape) => {
        return `<template>
            <span class="title">
                <span class="name">
                    <span class="flag-icon flag-icon-${code.toLowerCase()} flag-icon-squared">
                        </span>
                </span>
            </span>
            <span class="description">${code} - ${name} </span>
	<template>
	<link rel="stylesheet" type="text/css" href="style.css">
	<h1>${message}</h1>
	<hr/>
	<compose view="info-card.html"></compose>
	</template>
	<template>
	<h1>${greeting}</h1>
	<form class="form-inline">
	<input class="form-control" placeholder="greeting..." value.bind="greeting"></input>
	</form>
	</template>
	{
	"name": "my-books",
	"type": "project:application",
	"platform": {
	"id": "web",
	"displayName": "Web",
	"output": "scripts",
	"index": "index.html"
	},
	"transpiler": {
	<template>
	<require from="./inspect-binding-behavior"></require>
	<require from="./style.css"></require>

	<section>
	<h1>${message & inspect}</h1>

	<hr/>

	<input value.bind="message & inspect"></input>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>CSS Transition Example</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="box"></div>
	</body>
	...
	"jquery",
	"text",
	{
	"name": "selectize",
	"main": "dist/js/standalone/selectize.js",
	"path": "../node_modules/selectize",
	"deps": [
	"jquery"
	],
	npm install jquery --save
	npm install selectize --save
	npm install flag-icon-css --save
	loadSelectItemView(templateUrl) {
	return this.viewEngine.loadViewFactory(templateUrl);
	}

	getHtml(item, factory) {
	const childContainer = this.container.createChild();
	const view = factory.create(childContainer);

	view.bind(item);
	render: {
	option: (item, escape) => {
	return `<template>
	<span class="title">
	<span class="name">
	<span class="flag-icon flag-icon-${code.toLowerCase()} flag-icon-squared">
	</span>
	</span>
	</span>
	<span class="description">${code} - ${name} </span>