aurelia-clean-bindigs

This plugin will clean up your bindings:

<template>
  <input type="text" value.bind="value" change.trigger="onChange($event)">
  <label css="color: ${value}">${value}</label>
  <div custom-attribute="color.bind: squareColor; side-length.bind: squareSize"></div>
</template>

After compilation this view becomes:

<template>
  <input type="text" class="au-target" au-target-id="...">
  <label class="au-target" au-target-id="...">...</label>
  <div class="au-target" au-target-id="..."></div>
</template>

After ViewFactory creates view it becomes:

<template>
  <input type="text">
  <label>...</label>
  <div></div>
</template>

Building The Code

To build the code, follow these steps.

Ensure that NodeJS is installed. This provides the platform on which the build tooling runs.
From the project folder, execute the following command:
```
npm install
```
Ensure that Gulp is installed. If you need to install it, use the following command:
```
npm install -g gulp
```
To build the code, you can now run:
```
gulp build
```
You will find the compiled code in the dist folder, available in three module formats: AMD, CommonJS and ES6.
See gulpfile.js for other tasks related to generating the docs and linting.

How to install this plugin?

In your project install the plugin via jspm with following command
```
jspm install npm:aurelia-clean-bindings
```
Make sure you use manual bootstrapping. In order to do so open your index.html and locate the element with the attribute aurelia-app. Change it to look like this:
```
<body aurelia-app="main">
...
```
Create (if you haven’t already) a file main.js in your src folder with following content:

  export function configure(aurelia) {
    aurelia.use
      .standardConfiguration()
      .developmentLogging()
      .plugin('aurelia-clean-bindings');
    aurelia.start().then(a => a.setRoot());
  }