Skip to content

Instantly share code, notes, and snippets.

@dealproc
Created October 26, 2013 00:06
Show Gist options
  • Save dealproc/7163720 to your computer and use it in GitHub Desktop.
Save dealproc/7163720 to your computer and use it in GitHub Desktop.
Durandal.JS example for running modals.
<div class="messageBox wideMessageBox">
<div class="modal-header">
<h3 data-bind="text: title"></h3>
</div>
<div class="modal-body">
<!-- Whatever you want here to display in your modal -->
</div>
<div class="modal-footer">
<!-- only because i have save/cancel bindings on my module above. -->
<button class="btn btn-default" data-bind="click: cancel">Cancel</button>
<button class="btn btn-primary" data-bind="click: save">Save</button>
</div>
</div>
/// <reference path="../../../Scripts/jquery-2.0.3.js" />
/// <reference path="../../../Scripts/require.js" />
/// <reference path="../../../Scripts/knockout-2.3.0.debug.js" />
/// <reference path="../../../Scripts/durandal/plugins/router.js" />
define([
"plugins/dialog",
"plugins/observable",
"durandal/app"],
function (dialog, observable, app) {
// supposed to return a function here, not an object?!
var ctor = function () { };
ctor.prototype.title = "Modal's Title";
ctor.prototype.cancel = function () {
dialog.close(this);
}
ctor.prototype.save = function () {
var _Self = this;
// do some silly work
// you'll most likely be in a deffered function, which is why you need to capture
// "this" into "_Self" so that you can call with the right "this" object.
dialog.close(_Self);
};
ctor.show = function ("your object to pass goes here.}) {
var dlg = new ctor();
dlg.model = { your object you passed };
// any work you need to do, validation, whatever...
return dialog.show(dlg);
};
return ctor;
});
/// <reference path="../../dataservices/account.js" />
/// <reference path="../../../Scripts/jquery-2.0.3.js" />
/// <reference path="../../../Scripts/require.js" />
/// <reference path="../../../Scripts/knockout-2.3.0.debug.js" />
define([
"jquery",
"durandal/app",
"./create"],
function ($, app, createForm) {
return {
grid: undefined,
activate: function(){
var _Self = this;
},
compositionComplete: function () {
},
deactivate: function () {
},
create: function () {
createForm.show();
},
edit: function (id) {
var dataService = provider.define("DatabaseServer");
dataService.get({ id: id })
.then(function (data) {
// if you want to pass data in, your "show()" method should
// have the parameter(s) available to accept the data you want
// to pass.
editForm.show(data);
});
}
}
});
@jeroldhaas
Copy link

Line 31:
ctor.show = function ("your object to pass goes here."}) {

Easier to read when the parser isn't spewing red color all over the code background 😃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment