Question

I am new to Dojo and cannot seem to find the appropriate documentation or examples on how to do what I am trying to accomplish. I am working on creating a decision tree style document that dynamically adds new options to an existing element. The code should add a new node to the end of a specific DIV. To do this, it must find the value attribute of an element called branchID. It then increments the value by one and adds new HTML to the page. In jQuery, I would use this

$('#btnAddFork').click( function(){
    var branchID = $('#branchID').attr( 'value' );
    var newNodeHTML = "<div class='node'>new node #" + (++n) + "</div>';
    $('div#NodeDIV').append( newForkHTML );
});

This code works in the proof of concept I created before requirements changes forced me to use a different framework. I am trying the following in Dojo

require(["dojo/dom-construct", "dojo/dom", "dojo/dom-attr", "dojo/on", "dojo/domReady!"],
function(domConstruct, dom, on){
  on(dom.byId("btnAddFork"), "click", function(){
    var n = domAttr.get("branchID", "value");
    domConstruct.place("<div class='node'>new node #" + (++n) + "</div>", "NodeDIV");
  });
}); 

The Dojo code is dying on the line where I attempt to assign a value to n. The error message is “TypeError: object is not a function”. The error message hasn’t pointed me in the right direction toward finding the solution. I am sure that it is the way I’m tring to use the domAttr.get function to get a value but I cannot seem to find the way to make this work the way that I would expect it to. How does Dojo handle things like this? It would be very helpful if someone could point to the documentation on how/why the solution needs to be written the way it does.

Answer 1

I was able to find the solution for this question but instead of removing the question, I will provide the details about what I found so that others may not make what is really a beginner level error. The problem was the way that I was writing the function definition after the require statement. The function definition requires each item from require to be specified (other than domReady! since it is a helper function for the loader). I missed this small detail when I was reading through the documentation. The following code works exactly as expected.

require(["dojo/dom-construct", "dojo/dom", "dojo/on", "dojo/dom-attr", "dojo/domReady!"],
function(domConstruct, dom, on, domAttr){
  on(dom.byId("btnAddFork"), "click", function(){
    var n = domAttr.get("branchID", "value");
    domConstruct.place("<div class='node'>new node #" + (++n) + "</div>", "NodeDIV"); 
    domAttr.set("branchID", "value", n);
  });
});

Notice that in the working code, I added domAttr to the function definition. Once I had read through all of the documentation for domAttr for probably the fourth or fifth time, I realized that I was not adding it to the function definition. The Dojo documentation that I have read isn’t completely clear about building the require statement and how to use it so I missed this the first few times around.