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>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
distfolder, available in three module formats: AMD, CommonJS and ES6. -
See
gulpfile.jsfor other tasks related to generating the docs and linting.
- In your project install the plugin via
jspmwith following command
jspm install npm:aurelia-clean-bindings- Make sure you use manual bootstrapping. In order to do so open your
index.htmland 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.jsin yoursrcfolder with following content:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-clean-bindings');
aurelia.start().then(a => a.setRoot());
}