从另一个AMDjs单元调用对象的方法?

时间:2016-10-20 15:10:15

标签: dojo amd

我正在尝试调用一个对象的方法,该对象在另一个AMDjs单元内声明和定义。 这是一个示例代码:

第一单元:

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;
   
} );

我试图在第二个单元中引用来自另一个单元的对象:

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() };
  ...
} );

  • 为什么单击按钮结果xTree“未定义”而不是触发fire()方法?

1 个答案:

答案 0 :(得分:0)

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.