https://github.com/mbejda/bootstrapmodaldurandaljs
Bootstrap Modal Plugin For Durandal.js
https://github.com/mbejda/bootstrapmodaldurandaljs
Last synced: about 1 year ago
JSON representation
Bootstrap Modal Plugin For Durandal.js
- Host: GitHub
- URL: https://github.com/mbejda/bootstrapmodaldurandaljs
- Owner: mbejda
- License: gpl-2.0
- Created: 2014-09-22T00:25:39.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2014-12-21T16:35:26.000Z (over 11 years ago)
- Last Synced: 2023-08-04T02:00:38.739Z (almost 3 years ago)
- Homepage:
- Size: 154 KB
- Stars: 3
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Bootstrap Modal Plugin for Durandal.js
========================
Bootstrap Modal Plugin For Durandal.js.
Tested on Bootstrap 3.2 and Durandal 2.1.0.
## Installation
1. Add the BootstrapModal.js into Durandal.js plugins directory.
2. Activate the plugin.
``` javascript
app.configurePlugins({
router:true,
dialog: true,
bootstrapModal: true
});
```
## API
##### dialog.showBootstrapDialog(obj, activationData)
Displays Twitter Bootstrap modal as a dialog.
##### dialog.showBootstrapMessage(message, title, options, autoclose, settings)
Displays Twitter Bootstrap modal as a message.
## Example Usage
``` javascript
define(['plugins/http', 'durandal/app', 'knockout', 'plugins/dialog'], function(http, app, ko,dialog) {
return {
displayName: 'Flickr',
images: ko.observableArray([]),
activate: function() {
if (this.images().length > 0) {
return;
}
var that = this;
return http.jsonp('http://api.flickr.com/services/feeds/photos_public.gne', {
tags: 'mount ranier',
tagmode: 'any',
format: 'json'
}, 'jsoncallback').then(function(response) {
that.images(response.items);
});
},
select: function(item) {
console.log('select')
item.viewUrl = 'views/detail';
dialog.showBootstrapModal(item, {});
},
canDeactivate: function() {
return dialog.showBootstrapMessage('Are you sure you want to leave this page?', 'Navigate', ['Yes', 'No'], null);
}
};
});
```