How to map a property to a DOM node in DOJO?

Question

I have a widget in DOJO, I am able to set a property for it using

registry.byId('1831').set('title', 'xxx PROP updated');

• I to update the HTML the the property change.

Any idea how to do it?

   define([
        "dojo/_base/declare",
        "dijit/_WidgetBase",
        "dijit/_TemplatedMixin",
        'dijit/_AttachMixin',
        "dojo/text!./templates/Button.html",
        "dojo/dom-style",
        "dojo/_base/fx",
        "dojo/_base/lang",
        "dojo/on",
        "dojo/mouse",
        "require"
    ], function (declare, _WidgetBase, _TemplatedMixin, _AttachMixin, template, domStyle, baseFx, lang, on, mouse, require) {
        // private members

        return declare([_WidgetBase, _TemplatedMixin, _AttachMixin], {
            // public properties
            templateString: template,
            ntvType: 'Button',
            baseClass: "ntvButton",
            title: 'Title here',
            // set properties doho.stateful
            _setTitleAttr: function (value) {
                console.log("Setting value of title to " + value);
                this._set("title", value);
            },

            postCreate: function () {
                var domNode = this.domNode;
            },
        });
    });





    <div data-ntv-type="${ntvType}" class="${baseClass}">
        <button type="button">${title}</button>
    </div>

Answer 1

dijit provides a built-in mechanism to map widget attributes to dom node attribute. This is done via custom setter defined as a hash. For example: // Attributes name: "unknown", _setNameAttr: { node: "nameNode", type: "innerHTML" }

see http://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html#mapping-widget-attributes-to-domnode-attributes for more information.

Answer 2

I solved using data-dojo-attach-point in the template and adding a reference in the JS code.

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    'dijit/_AttachMixin',
    "dojo/text!./templates/Button.html",
    "dojo/dom-style",
    "dojo/_base/fx",
    "dojo/_base/lang",
    "dojo/on",
    "dojo/mouse",
    "require"
], function (declare, _WidgetBase, _TemplatedMixin, _AttachMixin, template, domStyle, baseFx, lang, on, mouse, require) {
    // private members

    return declare([_WidgetBase, _TemplatedMixin, _AttachMixin], {
        // public properties
        templateString: template,
        ntvType: 'Button',
        baseClass: "ntvButton",
        title: '',
        // set properties doho.stateful
        _setTitleAttr: function (value) {
            console.log("Setting value of title to " + value);
            this._set("title", value);
            this._updateDom();
        },
        // update dom
        _updateDom: function () {
            this.titleDom.innerHTML = this.title;
        },

        postCreate: function () {
            var domNode = this.domNode;
        },
    });
});


<div data-ntv-type="${ntvType}" class="${baseClass}">
    <button type="button"><span data-dojo-attach-point='titleDom'>${title}</span></button>
</div>