html Durandal.JS运行模态的示例。

Posted 2021-05-11

/// <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);
                });
            }
        }
    });

/// <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;
    });

<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>