dojo 1.9:变量替换在修改后的templateString上失败

时间:2013-12-08 18:15:30

标签: dojo dojo-1.9

我正在使用dojo-1.9.1并且我正在扩展一个小部件,我要在继承的templateString中向表中添加一个<tr>节点。插入节点但不替换变量。有人可以查看下面的来源并指出实施中的错误。顺便说一下,这是我第一次创建小部件。

LVS /插件/ LoginPage.js

define([ 
// Dojo         
    "dojo/_base/declare", 
    "dojo/dom-construct",
    "dojo/query",
// Dijit
    "dijit/_WidgetBase",
// xwt
    "xwt/widget/LoginPage",
    "xwt/widget/CommonUtilities",
// lvs
    "dojo/text!./templates/UserRegistration.html"
], function(
// Dojo 
    declare, 
    domConstruct,
    query,
// Dijit    
    _WidgetBase,
// xwt
    LoginPage,
    xwtUtils,
// lvs
    UserRegistration
) {
    // We declare the namespace of our widget and add the mixins we want to use.
    return declare("lvs.widget.LoginPage", [ LoginPage, _WidgetBase ], {

        // userRegistrationLabel: String
    //      The text used for redirecting to user registration page
        userRegistrationLabel: "New User? Register here.",  

    // userRegistrationURL: String
    //      URL for the page to register new user
        userRegistrationURL: "RegistrationForm.html",

    // needUserRegistrationLink: Boolean
    //      Whether the user registration link is visible or hidden
        needUserRegistrationLink: true,

        constructor: function(args) {
        //make the constructor arguments a mixin
            declare.safeMixin(this, args);
        },

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

        var root = this.domNode; 
        var row = domConstruct.toDom(UserRegistration);

        query('tr[dojoAttachPoint="problemRowAP"]', root).forEach(function(node) {
                domConstruct.place(row, node, "after");             
        });

        this.templateString = this.domNode.innerHTML;

        // This does not work either    
            //domConstruct.place(UserRegistration, this.problemRowAP, "after");
        },

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

            this.set("userRegistrationURL", this.userRegistrationURL);
            this.set("userRegistrationLabel", this.userRegistrationLabel);
        },

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

            if(!this.needUserRegistrationLink){
            this._removeUserRegistrationLink();
        }
        },

        _showUserRegistrationDlg: function() {
            xwtUtils.openURL(this.userRegistrationURL, "_new");
        },

        _removeUserRegistrationLink: function() {
            dojo.destroy(this.userRegistrationRowAP);
        },

        _setUserRegistrationLabelAttr: function(label) {
            this._set("userRegistrationLabel", label);
        },

        _setUserRegistrationURLAttr: function(url) {
            this._set("userRegistrationURL", url);
        }
    });
});

LVS /插件/模板/ UserRegistration.html

<tr data-dojo-attach-point="userRegistrationRowAP">
    <td></td>
    <td class="problem" style="padding-left: 0px; padding-top: 5px;">
        <span data-dojo-attach-point="userRegistrationAP" class="problemsLoggingIn" style="margin-left: 8px;">
        <a data-dojo-attach-point="userRegistrationAnchor" href="${userRegistrationURL}" target="_top" tabIndex="0" data-dojo-attach-event="ondijitclick:_showUserRegistrationDlg">${userRegistrationURL}</a>
        </span>
    </td>
</tr>

小部件实例化代码:

var loginPage = new LoginPage({
    id: "login_form",
    // other properties set here...
    userRegistrationLabel: "New user registration",
    userRegistrationURL: "RegistrationPage.html",
    onClickSubmit: function() {
        alert('The form will be submitted');
    }
}, "login_form");

loginPage.set('userRegistrationLabel', 'New User? Register here.');
loginPage.set('userRegistrationURL', 'RegistrationPage.html');

loginPage.startup();

输出附在下面。

enter image description here

1 个答案:

答案 0 :(得分:2)

dojo变量替换发生在postMixinProperties()中,它在buildRendering()之前运行。您的tr-expansion代码是从buildRendering()调用的,因此它与替换模板一起发生。

您需要在主后混合代码之前进行模板覆盖,但在这种情况下,您无法使用domConstruct调用执行此操作(因为在此阶段它们尚未被解析)。