Search code examples
dojoamd

Calling a method of an object from another AMDjs unit?


I am trying to call a method of an object which id declared and defined inside another AMDjs unit. Here's an example code:

the first unit :

require(
[
    "dojo/ready",
    "dojo/store/Memory",				
    "cbtree/Tree",						
    "cbtree/model/TreeStoreModel",	
    "dojo/dom-class",
    "dojo/domReady",
    "dijit/form/CheckBox",
    "dojo/domReady!"
],
function
(
    ready,
    Memory,
    Tree,
    ObjectStoreModel,
    domClass,
    CheckBox
)
{

    var XTree = function()
    {
        this.store = new Memory( { data: this.datax() } );

        this.model = new ObjectStoreModel(
        {
            store: this.store,
            query: { id: "all" },
            rootLabel: "xxx",
            checkedRoot: true
        } );
    }

    XTree.prototype.applyTheTree = function()
    {                
        this.tree = new Tree( { model: this.model, id: "tree00", animation: false }, "treeViewx" );
        this.tree.startup();
    }

    XTree.prototype.fire = function()
    {
        alert( 'fire' );
    }

    XTree.prototype.datax = function ()
    {
        return [

                   { id: 'all', name:'' },
                        { id: 'br1', name:'branch 1', parent: 'all' },
                            { id: '1', name:'b 1', parent: 'br1' },
                   { id: '1', name:'b 2', parent: 'all' }
                
               ]
    };
   

    var xTree = new XTree();
   

    ready( function ()
    {
        xTree.applyTheTree();
              
    } );

    return xTree;
   
} );

I trying to reference the object from another unit like this inside the second unit :

define( [ .. 'XTree' ], function( .. xTree ) 
{
  ...
  
  var btnX = document.createElement( 'input' );
      btnX.type = 'button';
      btnX.value = 'hey';
      btnX.style.width = '90px';
      btnX.style.height = '25px';
      btnX.onclick = function ( ) { xTree.fire() };
  ...
} );

  • Why clicking the button result xTree "is not defined" instead of trigering the fire() method ?

Solution

  • You are using the require and define in reverse.

    Use define to define a module that can be consumed by other code. Generally, define will be used in a javascript file.

    Use require when you are not defining a module, but you require modules that have been defined. Generally, require will be used in HTML pages. The HTML page is not a module, but requires modules to present the page to the user.

    Also, try to avoid using prototype while using dojo. you can use 'dojo/_base/declare' to create a module constructor.

    define([ "dojo/ready",
      "dojo/_base/declare",
      "dojo/store/Memory",              
      "cbtree/Tree",                        
      "cbtree/model/TreeStoreModel",    
      "dojo/dom-class",
      "dojo/domReady",
      "dijit/form/CheckBox",
      "dojo/domReady!"
    ], function( ready, 
      declare,
      Memory,
      Tree,
      ObjectStoreModel,
      domClass,
      CheckBox){
    
    
        var XTree = declare( null, {
    
            constructor: fuction(){
                this.store = new Memory({ data: this.datax() });
                this.model = new ObjectStoreModel({
                    store: this.store,
                    query: { id: "all" },
                    rootLabel: "xxx",
                    checkedRoot: true
                });
            },
    
            applyTheTree : function(){                
                this.tree = new Tree( { model: this.model, id: "tree00", animation: false }, "treeViewx" );
                this.tree.startup();
            },
    
            fire : function(){
                alert( 'fire' );
            },
    
            datax = function(){
                return [{ id: 'all', name:'' },
                    { id: 'br1', name:'branch 1', parent: 'all' },
                    { id: '1', name:'b 1', parent: 'br1' },
                    { id: '1', name:'b 2', parent: 'all' }]
            }
        });
    
        var xTree = new XTree();
        ready(function (){
            xTree.applyTheTree();
        });
    
        return xTree;   
    });
    

    Now here you are returning a instance of a object rather than the constructor. So basically, you are trying to create a singleton module. Is that correct?

    Also, ensure that the module path while requiring in another module or require method, is correct. If you get a Undefinded Module exception in the console then, something else is the issue.

    Hope this was helpful.