brylie/app.html

## app.html
<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="./open-api-info"></require>
  <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <i class="fa fa-user"></i>
        <span>
          Open API Designer
        </span>
      </a>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2>
          Design view
        </h2>

        <div class="form-group">
          <label for="name">
            Open API Spec version
          </label>
          <input type="text" class="form-control" id="name" placeholder="Email" value.bind="openApiSpec.swagger">
        </div>

        <open-api-info info.bind="openApiSpec.info"></open-api-info>
      </div>
      <div class="col-md-6">
        <h2>JSON Preview</h2>
        <pre>
          ${openApiSpecString}
        </pre>
      </div>
    </div>
  </div>
</template>

## app.js
export class App {
  constructor() {
    this.openApiSpec = {
      swagger: '2.0',
      info: {
        title: ''
      },
      /*
      host: '',
      basePath: '',
      schemas: [],
      consumes: [],
      produces: [],
      paths: {},
      definitions: {},
      parameters: {},
      responses: {},
      security: [],
      tags: [],
      externalDocs: {}
      */
    };
  }

  /*
  * Convert Open API Spec object to string
  */
  get openApiSpecString() {
    const openApiSpecStringified = JSON.stringify(this.openApiSpec, null, ' ');

    return openApiSpecStringified;
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>
      OpenAPI Designer
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## open-api-info.html
<template>
  <h1>Info</h1>
  <div class="form-group">
    <label for="info-title">
      Title
    </label>
    <input
      type="text"
      class="form-control"
      id="info-title"
      placeholder="Title"
      value.bind="info.title">
  </div>
</template>

## open-api-info.js
import {bindable, bindingMode} from 'aurelia-framework';

export class OpenApiInfo {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) info = {};

  constructor() {
    console.log(this);
  }
}
	<template>
	<require from="bootstrap/css/bootstrap.css"></require>
	<require from="./open-api-info"></require>
	<nav class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
	<a class="navbar-brand" href="#">
	<i class="fa fa-user"></i>
	<span>
	Open API Designer
	</span>
	</a>
	</div>
	</nav>

	<div class="container">
	<div class="row">
	<div class="col-md-6">
	<h2>
	Design view
	</h2>

	<div class="form-group">
	<label for="name">
	Open API Spec version
	</label>
	<input type="text" class="form-control" id="name" placeholder="Email" value.bind="openApiSpec.swagger">
	</div>

	<open-api-info info.bind="openApiSpec.info"></open-api-info>
	</div>
	<div class="col-md-6">
	<h2>JSON Preview</h2>
	<pre>
	${openApiSpecString}
	</pre>
	</div>
	</div>
	</div>
	</template>
	export class App {
	constructor() {
	this.openApiSpec = {
	swagger: '2.0',
	info: {
	title: ''
	},
	/*
	host: '',
	basePath: '',
	schemas: [],
	consumes: [],
	produces: [],
	paths: {},
	definitions: {},
	parameters: {},
	responses: {},
	security: [],
	tags: [],
	externalDocs: {}
	*/
	};
	}

	/*
	* Convert Open API Spec object to string
	*/
	get openApiSpecString() {
	const openApiSpecStringified = JSON.stringify(this.openApiSpec, null, ' ');

	return openApiSpecStringified;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>
	OpenAPI Designer
	</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	<template>
	<h1>Info</h1>
	<div class="form-group">
	<label for="info-title">
	Title
	</label>
	<input
	type="text"
	class="form-control"
	id="info-title"
	placeholder="Title"
	value.bind="info.title">
	</div>
	</template>
	import {bindable, bindingMode} from 'aurelia-framework';

	export class OpenApiInfo {
	@bindable({ defaultBindingMode: bindingMode.twoWay }) info = {};

	constructor() {
	console.log(this);
	}
	}