Dojo - how to I programatically modify dojo-props?

Question

I have a ToolBarButton like such:

<span data-dojo-type="dojox/mobile/ToolBarButton" 
      data-dojo-props="label:'Back', moveTo:'config'" ></span>

You can see that I have the moveTo property declared as 'config' but how can I programatically change that?

I want to reuse this button but I want to call a function which will modify the value of moveTo.

Kinda like this:

<span data-dojo-type="dojox/mobile/ToolBarButton" onclick="modifyMoveTo('somePath')"
      data-dojo-props="label:'Back', moveTo:'config'" ></span>

score 3 · Answer 1 · answered May 11 '15 at 21:48

Is this part of a template? If so, you can give it an attach-point like

<span data-dojo-type="dojox/mobile/ToolBarButton" 
    data-dojo-attach-point="myButton" 
    data-dojo-props="label:'Back', moveTo:'config'" ></span>

and then change it by doing this:

this.myButton.set("moveTo", "somePath");

If not, you can give it an id, say 'myButton', and from your code, use the dojo's registry utility (dijit/registry), and do something like this:

var btn = registry.byId("myButton"); //This will return the widget
btn.set("moveTo", "somePath");

score 1 · Answer 2 · answered May 12 '15 at 08:21

The data-dojo-props are just a way to set properties using markup. If you look at the API docs for a dojox/mobile/ToolbarButton for example , you'll see a lot of properties.

Also, if you look at the method summary you will see the following method:

set(name,value) Set a property on a widget

So yeah, each widget has this method, allowing you to set any property that you can find in the API docs. For example:

myToolbarBtn.set('label', 'Back 2');

Now, to get a reference to the widget you want to change (for example myToolbarBtn), you can use the dijit/registry module, which allows you to obtain the widgets by DOM node, ID, parent nodes, ... .

If you're using global functions like modifyMoveTo(), then you could obtain the event.target property to retrieve the DOM node, and then use:

require(["dijit/registry"], function(registry) {
    var myToolbatBtn = registry.byNode(evt.target);
});

And then you have access to the widget programmatically. Or like Richard said, you can use IDs, templates, ... .

Dojo - how to I programatically modify dojo-props?

2 Answers2