Einfaches Login-Implementierung für Dojo MVC

Hinzufügen möchte ich, dass meine Lösung: http://jsfiddle.net/phusick/tG8Sg/

Ist es etwas verdreht, aufgrund der Einschränkungen von jsFiddle, aber die Grundprinzipien sind die gleichen wie beschäftige ich in meiner Codierung.

Zunächst den login-Prozess (oder jede andere form der Verarbeitung) ist gekapselt in den dialog und die Kommunikation mit dem rest der Anwendung dachte emitting evens über dojo/Evented. Dies ist, wie es funktioniert:

var loginDialog = new LoginDialog({ controller: loginController});
loginDialog.startup();
loginDialog.show();

loginDialog.on("cancel", function() {
    console.log("Login cancelled.");        
});

loginDialog.on("error", function() { 
    console.log("Login error.");
});

loginDialog.on("success", function() { 
    console.log("Login success.");
    console.log(JSON.stringify(this.form.get("value")));
});

Wie Sie sehen können, in der jsFiddle, es gibt zwei Vorlagen dialog-Vorlage und login-Formular-Vorlage, die ich montieren innerhalb der LoginDialog Konstruktor. Der Grund ist, ich hätte normalerweise auch eine Klasse Verpackung dijit/form/Form zu tun, einige Zauber über den standard hinaus dijit/form/Form - Validierung und Daten-Serialisierung, aber da login ist einfach und es würde ein Chaos in der einzelnen Datei von jsFiddle, ich bin ihn Los. Der Vorteil der Trennung ein Formular aus, wird ein dialog Sie können die gleiche form (D. H. Ansicht), zusammen mit der form von ad-hoc-code woanders, z.B. in einer ContentPane. Die form ist es nur zum anzeigen und sammeln von Daten zu/von der Benutzer, sollte es nicht direkt kommunizieren mit Modell, d.h. web-service, es gibt ein Controller für diesen Zweck:

var LoginController = declare(null, {

    constructor: function(kwArgs) {
        lang.mixin(this, kwArgs);
    },

    login: function(data) {
        //simulate calling web service for authentication
        var def = new Deferred();
        setTimeout(lang.hitch(this, function() {
            def.resolve(data.username == this.username && data.password == this.password);                
        }), 1000);
        return def;
    }
});

Erstellen Sie eine Instanz der LoginController:

//provide username & password in the constructor
//since we do not have web service here to authenticate against    
var loginController = new LoginController({username: "user", password: "user"});

und übergeben es an LoginDialog Konstruktor noch oben gesehen:

var loginDialog = new LoginDialog({ controller: loginController});

Schließlich LoginDialog Klasse:

var LoginDialog = declare([Dialog, Evented], {

    READY: 0,
    BUSY: 1,

    title: "Login Dialog",
    message: "",
    busyLabel: "Working...",

    //Binding property values to DOM nodes in templates
    //see: http://www.enterprisedojo.com/2010/10/02/lessons-in-widgetry-binding-property-values-to-dom-nodes-in-templates/
    attributeMap: lang.delegate(dijit._Widget.prototype.attributeMap, {
        message: {
            node: "messageNode",
            type: "innerHTML"               
        }            
    }),

    constructor: function(/*Object*/ kwArgs) {
        lang.mixin(this, kwArgs);            
        var dialogTemplate = dom.byId("dialog-template").textContent; 
        var formTemplate = dom.byId("login-form-template").textContent;
        var template = lang.replace(dialogTemplate, {
            form: formTemplate                
        });

        var contentWidget = new (declare(
            [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin],
            {
                templateString: template                   
            }
        )); 
        contentWidget.startup();
        var content = this.content = contentWidget;
        this.form = content.form;
        //shortcuts
        this.submitButton = content.submitButton;
        this.cancelButton = content.cancelButton;
        this.messageNode = content.messageNode;
    },

    postCreate: function() {
        this.inherited(arguments);

        this.readyState= this.READY;
        this.okLabel = this.submitButton.get("label");

        this.connect(this.submitButton, "onClick", "onSubmit");
        this.connect(this.cancelButton, "onClick", "onCancel");

        this.watch("readyState", lang.hitch(this, "_onReadyStateChange"));

        this.form.watch("state", lang.hitch(this, "_onValidStateChange"));
        this._onValidStateChange();
    },

    onSubmit: function() {
        this.set("readyState", this.BUSY);
        this.set("message", ""); 
        var data = this.form.get("value");

        //ask the controller to login
        var auth = this.controller.login(data);

        Deferred.when(auth, lang.hitch(this, function(loginSuccess) {
            if (loginSuccess === true) {
                this.onLoginSuccess();
                return;                    
            }
            this.onLoginError();
        }));
    },

    onLoginSuccess: function() {
        this.set("readyState", this.READY);            
        this.emit("success");
    },

    onLoginError: function() {
        this.set("readyState", this.READY);
        this.set("message", "Please try again."); 
        this.emit("error");         
    },

    onCancel: function() {
       this.emit("cancel");     
    },

    _onValidStateChange: function() {
        this.submitButton.set("disabled", !!this.form.get("state").length);
    },

    _onReadyStateChange: function() {
        var isBusy = this.get("readyState") == this.BUSY;
        this.submitButton.set("label", isBusy ? this.busyLabel : this.okLabel);
        this.submitButton.set("disabled", isBusy);
    }            
});

Finden Sie Vorlagen, die in der oben genannten jsFiddle. Sie sollten in separaten Dateien required über dojo/text! normal. Ich habe Sie in <script type="text/template"> passen in jsFiddle.

InformationsquelleAutor phusick

Mit Hilfe der mschr. Ich kam accross dieser Lösung.

define([
"dojo/_base/declare",
"dojo/dom",
"dijit/_Widget",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/text!app/views/Login/Login.html",
"dijit/Dialog",
"dijit/form/Button",
"dijit/form/TextBox"

], function(
    declare,
    dom,
 _Widget,
_TemplatedMixin, 
_WidgetsInTemplateMixin,
template,
Dialog
){
    return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, Dialog], {

        templateString: template,

        postCreate: function() {
           this.inherited(arguments);
           //make reference to widget from the node attachment
           //this.submitButton = this.getChildren()[ButtonIndex];
           //override its onSubmit
             /*alert("username :" + dom.byId("userId").value() 
                 + "  Password: " + dom.byId("password").value());*/
            dojo.connect(this.loginButton, 'onclick', this._login);
        },
        //and a sample on how to implement widget-in-template stateful get/setter pattern
        //e.g. if submitbutton label should change on some event, call as such:
        //dijit.byId('loginForm').set("submitLabel", "Sendin login, please wait");
        _login : function() {
            var value = dom.byId("userId").value;

            if(value)
                alert("username: " + value);
        },
        //and a sample on how to implement widget-in-template stateful get/setter pattern
        //e.g. if submitbutton label should change on some event, call as such:
        //dijit.byId('loginForm').set("submitLabel", "Sendin login, please wait");
        _setSubmitLabelAttr : function(value) {
            return this.submitButton.set("label", value);
        },
        _getSubmitLabelAttr : function() {
            return this.submitButton.get("label");
        },
    });
});

InformationsquelleAutor fneron