Durandal dialog

Question

Please help. I'm trying to create a knockout template for durandal's dialog plugin. Is there anyone who can give me a basic example for this. Below is my sample code. But I can't make it work..

(function (require) {
    var app = require('durandal/app'),
    unitofwork = require('services/unitofwork'),
    dialog = require('plugins/dialog');


    var self = this;
    var uow = unitofwork.create();
    var userlist = ko.observableArray();
    var selecteduser = ko.observable();

    ko.dialog = {
    // Defines a view model class you can use to populate a grid

        viewModel: {
            selecteduser: selecteduser,
            userlist: userlist,
            ok: function () {
                console.log(this.selecteduser());
                dialog.close(this, this.selecteduser());
            },
            cancel: function () {
                console.log(this.selecteduser());
                dialog.close(this, "");
            },
            canDeactivate: function () {
                return dialog.showMessage(this.selecteduser());
            },
            show: function () {
                var query = breeze.EntityQuery
                                    .from("GetUsersByRole")
                                    .withParameters({ roleName: "EDITOR" }); // id=3 has two UserRoles

                uow.userrepository.CustomQuery(query).then(function (data) {
                    userlist(data);
                });

                console.log(userlist);

                return dialog.show(this);
            }
        }
    };

    // Templates used to render the grid
    var templateEngine = new ko.nativeTemplateEngine();

    templateEngine.addTemplate = function (templateName, templateMarkup) {
        document.write("<script type='text/html' id='" + templateName + "'>" + templateMarkup + "<" + "/script>");
    };

    templateEngine.addTemplate("ko_dialog_dialog", "\
                    <div class=\"messageBox\">\
                        <div class=\"modal-header\">\
                            <h3>\Assign to Editor</h3>\
                        </div>\
                        <div class=\"modal-body\">\
                            <form data-bind=\"submit: ok\">\
                                <label>\
                                    Editor Name:<br />\
                                    <select id=\"selCaseStatus\"\
                                        class=\"span2 shadow_select\"\
                                        data-bind=\"value: selecteduser, options: userlist, optionsText: 'UserName', optionsValue: 'UserName', optionsCaption: '--select--'\">\
                                    </select>\
                                </label>\
                            </form>\
                        </div>\
                        <div class=\"modal-footer\">\
                            <button class=\"btn btn-primary\" data-bind=\"click: ok\">\Ok&nbsp;<i class=\"icon-thumbs-up\">\</i>\</button>\
                            <button class=\"btn btn-primary\" data-bind=\"click: cancel\">\Cancel&nbsp;<i class=\"icon-thumbs-down\">\</i>\</button>\
                        </div>\
                    </div>"
                );

    // The "dialog" binding
    ko.bindingHandlers.dialog = {
        init: function () {
            return { 'controlsDescendantBindings': true };
        },
        // This method is called to initialize the node, and will also be called again if you change what the grid is bound to
        update: function (element, viewModelAccessor, allBindingsAccessor) {
            var viewModel = viewModelAccessor(), allBindings = allBindingsAccessor();

            // Empty the element
            while (element.firstChild)
                ko.removeNode(element.firstChild);

            // Allow the default templates to be overridden
            var panelTemplateName = allBindings.leftPanelTemplate || "ko_dialog_dialog";
            //,pageLinksTemplateName = allBindings.simpleGridPagerTemplate || "ko_simpleGrid_pageLinks";

            // Render the main grid
            var panelContainer = element.appendChild(document.createElement("DIV"));
            ko.renderTemplate(panelTemplateName, viewModel, { templateEngine: templateEngine }, panelContainer, "replaceNode");
        }
    };
})();

Answer 1

Durandal already has the features you're looking for, so there's no need to invent something on your own. Start reading http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals.html. Examples for OOTB usage can be found the the samples section e.g. http://dfiddle.github.io/dFiddle-2.0/#modal

For further customization take a look at http://durandaljs.com/documentation/api/#module/dialog/method/addContext.

And finally here's what @EisenbergEffect has to say about creating new dialog templates:

Create a new .html view in your project that contains the message box markup that you want. Then, either in main.js or in your shell, before you use the message box. Call dialog.MessageBox.setViewUrl('path/to/your/view');