aurelia-clean-bindings v0.1.0
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 commandjspm 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 yoursrc
folder with following content:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-clean-bindings');
aurelia.start().then(a => a.setRoot());
}