1

请帮忙。我正在尝试为 durandal 的对话插件创建一个淘汰赛模板。有没有人可以给我一个基本的例子。下面是我的示例代码。但我不能让它工作..

(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");
        }
    };
})();
4

1 回答 1

8

Durandal 已经拥有您正在寻找的功能，因此您无需自己发明一些东西。开始阅读http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals.html。OOTB 使用示例可以在示例部分找到，例如http://dfiddle.github.io/dFiddle-2.0/#modal

如需进一步定制，请查看 http://durandaljs.com/documentation/api/#module/dialog/method/addContext。

最后，这是@EisenbergEffect 关于创建新对话框模板的内容：

在您的项目中创建一个新的 .html 视图，其中包含所需的消息框标记。然后，在 main.js 或你的 shell 中，在你使用消息框之前。调用 dialog.MessageBox.setViewUrl('path/to/your/view');

于 2013-10-11T07:30:46.660 回答