1

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.

enter image description here

Deepak Marur
  • 537
  • 1
  • 13
  • 27

1 Answers1

2

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

peterh
  • 11,875
  • 18
  • 85
  • 108
  • 1
    You can do this multiple way. Imho the cleanest is if you inherit a new widget with an overdeclared template. This enabled you to make further changes in the table, without domConstruct manipulations, with simple html code. I am sure it is not the last of your template problems in dojo, and it is not your fault. – peterh Dec 08 '13 at 20:30
  • Since I was running out of time for a prototype, I copied the template to my namespace and modified the html to add the extra row. Thanks for the suggestion. – Deepak Marur Dec 09 '13 at 07:56
  • I don't clearly understand what you did, but it doesn't seem too dirty. – peterh Dec 09 '13 at 10:18