dojo 1.9: variable substitution failing on modified templateString

Question

I'm working with dojo-1.9.1 and I'm extending a widget where I've to add a <tr> node to a table in the inherited templateString. The node is inserted but the variables are not substituted. Could somebody have a look at the sources below and point out what is wrong in implementation. Btw, this is my first attempt at creating a widget.

lvs/widget/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/widget/templates/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>

The widget instantiation code:

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();

The output is attached below.

Answer 1

The dojo variable substitution happens in postMixinProperties(), which runs before buildRendering(). Your tr-expansion code is called from your buildRendering(), thus it happens with the substituted template.

You need to do the template overwriting before the main postmixing code, but in this case you can't do this with the domConstruct calls (because in this stage they aren't yet parsed).