0

参考Dojo MVC 的简单登录实现/ - 有一点我不明白。关于 phusick 的示例，登录对话框类调用 dom.byId("dialog-template") - "dialog-template" 是脚本中的一个 id，它是对话框的模板，应该出现在html 模板 - 不在主 html 中。因此，如果我删除它，对 dom.byId 的调用将失败

所以我的代码结构如下

main.html（调用只调用 main.js - 仅此而已） main.js（包含以下内容）

    require([
"dojo/_base/declare","dojo/_base/lang","dojo/on","dojo/dom","dojo/Evented",
"dojo/_base/Deferred","dojo/json","dijit/_Widget","dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin","dijit/Dialog",
"widgets/LoginDialog",
"widgets/LoginController",
"dijit/form/Form","dijit/form/ValidationTextBox","dijit/form/Button",

"dojo/domReady!"
], function(
declare,lang,on,dom,Evented,Deferred,JSON,  
_Widget,
_TemplatedMixin,
_WidgetsInTemplateMixin,
    
 Dialog,
 LoginDialog,
 LoginController
) {
// provide username & password in constructor
// since we do not have web service here to authenticate against    
var loginController = new LoginController({username: "user", password: "user"});

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

  
});

现在 LoginDialog.js 和 LoginDialogTemplate.html 是对话框的模板化小部件，而 LoginController.js 是控制器。

我的 LoginDialog.js 是

define([
"dojo/_base/declare","dojo/_base/lang","dojo/on","dojo/dom","dojo/Evented","dojo/_base/Deferred","dojo/json",

"dijit/_Widget","dijit/_TemplatedMixin","dijit/_WidgetsInTemplateMixin",
"dijit/Dialog","dijit/form/Form","dijit/form/ValidationTextBox","dijit/form/Button",
"dojo/text!templates/loginDialogTemplate.html",
"dojo/text!templates/loginFormTemplate.html",

"dojo/domReady!"
], function(
declare,lang,on,dom,Evented,Deferred,JSON,
_Widget,
_TemplatedMixin,
_WidgetsInTemplateMixin,
Dialog,
Form,
Button,
template

) {

return 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");
        
        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.set("message", "Login sucessful.");             
        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);
    }            
});
});

我的 loginDialogTemplate.html 如下

<script type="text/template" id="dialog-template">
<div style="width:300px;">
  
    <div class="dijitDialogPaneContentArea">
        <div data-dojo-attach-point="contentNode">
            {form}              
        </div>
    </div>

    <div class="dijitDialogPaneActionBar">
        <div
            class="message"
            data-dojo-attach-point="messageNode"                
        ></div>      
        <button
            data-dojo-type="dijit.form.Button"
            data-dojo-props=""                
            data-dojo-attach-point="submitButton"
        >
            OK
        </button>
        
        <button
            data-dojo-type="dijit.form.Button"
            data-dojo-attach-point="cancelButton"
        >
            Cancel
        </button>
    </div>      
</div>
</script>

由于模板具有 id="dialog-template" 所以我猜当小部件调用 dom.byId("dialog-template") 时，它会在该行：-> var dialogTemplate = dom.byId("dialog-template").textContent;

那么我在这里做错了什么？

如果我在主 html 中使用所有模板脚本，它工作正常。

4

1 回答 1

0

阿西夫，

由于您在定义函数中传递模板，因此不需要 dom.byId() 来获取内容。尝试这个：

从 HTML 模板中删除元素。

在 LoginDialog.js 中，将函数参数更改为：

...
Button,
dialogTemplate,
formTemplate

您将需要 formTemplate 进行下一次更改。我使用了“dialogTemplate”而不是“模板”，因此更明显的是它是如何替换示例中的代码的。接下来，将构造函数的开头更改为：

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

我只留下了注释代码，所以你可以看到我改变了什么。它的作用是创建一个名为“模板”的新模板字符串，方法是将您的 dialogTemplate HTML 中的 {form} 占位符替换为您传入的 formTemplate。然后它使用该新模板字符串来创建小部件。

于 2013-03-18T15:58:22.640 回答