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 installEnsure that Gulp is installed. If you need to install it, use the following command:
npm install -g gulpTo build the code, you can now run:
gulp buildYou 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.
How to install this plugin?
In your project install the plugin via
jspmwith following commandjspm install npm:aurelia-clean-bindingsMake 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());
}