aurelia-bs-modal
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
.
How to install this plugin?
- In your project install the plugin via
jspm
with following command
jspm install aurelia-bs-modal
- 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()
// 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.bind="view-model-name-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>
- 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;
}
}
How to add buttons with behavior into footer
au-button
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.
button
You can just as easily choose your own buttons to render there as shown in the sample.
How to change the content that shows
Setting content
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.
Binding to content
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>
Cool links
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