A Knockout plugin for Aurelia.
npm install aurelia-knockout> Adds support for Knockout binding syntax to make transition from Durandal and Knockout to Aurelia simpler. You can use Aurelia and Knockout bindings side-by-side to do migration in multiple steps.
!build
* aurelia-binding
* aurelia-dependency-injection
* aurelia-loader
* aurelia-pal
* aurelia-templating
* knockout
This library can be used in the browser only.
Install this plugin with npm:
``shell`
npm install aurelia-knockout --save
TypeScript definitions are included in the npm package.
To get started with the Aurelia CLI you have to add some lines to aurelia.json under aurelia_project after installed
this plugin through npm:
Add this snippet to the dependencies array in aurelia.json:
`
...
"knockout",
{
"name": "aurelia-knockout",
"path": "../node_modules/aurelia-knockout/dist/amd",
"main": "aurelia-knockout"
}
...
Register the plugin at the startup of Aurelia:
`es6`
export function configure(aurelia) => {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin("aurelia-knockout");
...
}
To use the knockout binding syntax in your HTML view you have to add the "knockout" custom attribute to a
html element which surrounds all elements which are using knockout syntax:
`html`
This will apply all bindings from this element and its children to the current viewmodel. The bindingContext from
Aurelia's "bind" function will be used for that. You have to add the attribute to each view with knockout syntax.
If you used Durandal as your previous SPA-Framework you want to use compositions. You can see the syntax below.
As the syntax looks like knockout, the compose binding was not part of knockout itself. This plugin can handle the
old Durandal composition syntax.
` html`
All cases from the offical Durandal documentation should be covered:
`html`
You can also pass an object as activationData which is passed as argument to the `activate(activationData)` function:`html`
The composition logic can handle Knockout Observables as parameters as well. The previous composition will be replaced.
The following callback functions will be called:
`compositionComplete(element, parentElement)` if the Aurelia completes the composition and`detached(element, parentElement)` before the composed view will be removed from the DOM.
To ensure full flexibility for your migration process, this plugin provides also a feature to set `@bindable`
properties in rewritten Aurelia sub-views from the activationData which comes from old Knockout based views:
##### Parent Knockout based view
`html`
The data object looks like:
`es6`
{
price: ko.observable(5),
productName: "Apples"
}
##### Child Aurelia based view
`html`
Product: ${productName}
Price: ${price}
The backing JavaScript code:
`es6
import {bindable} from "aurelia-framework";
import {KnockoutBindable} from "aurelia-knockout";
import {inject} from 'aurelia-dependency-injection';
@inject(KnockoutBindable)
export class ProductView {
@bindable
price;
productName;
knockoutBindable;
constructor(knockoutBindable) {
this.knockoutBindable = knockoutBindable;
}
activate(activationData) {
this.knockoutBindable.applyBindableValues(activationData, this);
}
}
`
This will set the value from `activationData.price` to `this.price`. `this.productName` however, is not`
updated because it has no @bindable` decorator and the variable from `activationData` is no Knockout`
Observable. To process non Knockout Observables anyway you have to pass false` as third parameter to the`applyBindableValues` function. If the outer value changed (and is an Observable) the corresponding inner
variable is updated too.
Subscriptions for Knockout Observables which are created from this plugin internally will be disposed automatically
if the child view is unbound.
- Migration guide from Durandal to Aurelia
To build the code, follow these steps.
1. Ensure that NodeJS is installed. This provides the platform on which the build tooling runs.
2. From the project folder, execute the following command:
`shell`
npm install
3. To build the code, you can now run:
`shell`
npm run build
4. You will find the compiled code in the folder, available in these module formats: AMD, CommonJS, ES2015, ES2017, Native Modules and System.
5. See package.json for other tasks.
To run the unit tests, first ensure that you have followed the steps above in order to install all dependencies and successfully build the library. Once you have done that, proceed with this additional steps:
1. You can run the tests with this command:
`shell``
npm run test