DEPRECATED - please use https://github.com/aurelia/dialog instead for modals.
This plugin is for the Aurelia platform. It sets up a wrapper for the Bootstrap modal.
To keep up to date on Aurelia, please visit and subscribe to the official blog. If you have questions, we invite you to join us on
.
- In your project install the plugin via
jspmwith following command
jspm install aurelia-bs-modal- 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()
// Install the plugin
.plugin('aurelia-bs-modal');
aurelia.start().then(a => a.setRoot());
}- Anywhere in your app add the following markup as a sample -
<modal showing.bind="showing">
<modal-header title="Name Goes Here" close.call="closeEventGoesHere()"></modal-header>
<modal-body content-view="view-model-path-goes-here" content-model.bind="model-name-goes-here"></modal-body>
<modal-footer>
<button class="btn" click.trigger="someFunctionGoesHere()">Save</button>
<au-button text="Cancel" click.call="someFunctionGoesHere()"></au-button>
</modal-footer>
</modal>(Note that when You don't want to close button in modal-header, then use close.bind="false" instead of close.call="closeEventGoesHere()" in modal-header)
- Update the bindings to be events in the view model that backs whereever you added the sample -
export class MyViewModel{
@bindable showing = false;
closeEventGoesHere(){
this.showing = false;
}
someFunctionGoesHere(){
console.log('do stuff');
this.showing = false;
}
}au-button is available through the aurelia-bs-modal plugin to have re-usable button logic free of presentiontation. Make sure to .call the click binding instead of trigger it since we are passing a function reference.
You can just as easily choose your own buttons to render there as shown in the sample.
Right now you can set the content-view property directly with the view-model name as shown in the example. This will be a one-time setting of the property and lets the modal know which view-model / view you want to render.
You can also (optionally) set the content-model property with the object that you want to act as the model to get data from to populate your view-model.
We can just as easily bind to that property to change the view-model mid-flight. A good example of this would be when using a wizard and going through steps. Ex -
In your view-model
export class MyViewModel{
this.modalContent = "./step1"
changeStep(){
this.modalContent = "./step2";
}
}<modal-body content-view.bind="modalContent"></modal-body>Here are a few samples of the modal in action -
Here is a single modal and a wizard - https://github.com/PWKad/aurelia-samples/tree/master/src/modal