freshcutdevelopment’s gists

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

## app.html
<template>
  <h1>${message}</h1>
</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="bootstrap/css/bootstrap.css"></require>
    <require from="styles.css"></require>

     <div class="container">
        <div class="header clearfix">
        <h3 class="text-muted"><span class="brand-highlight">my </span> books</h3>
      </div>
      <router-view></router-view>
      <footer class="footer">

## 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>

## 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>

## country-template.html
<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>

## country-picker.js
import {HttpClient} from 'aurelia-fetch-client';
import {bindable} from 'aurelia-framework';

export class CountryPicker{

    @bindable country;

    constructor(){
        this.selected = {"name" : 'Australia', "code" : 'AU'};
        this.templateUrl = 'templates/country-template.html';