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

Question

我正在尝试调用在另一个 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 "is not defined" 而不是触发 fire() 方法？

Answer 1

您正在反向使用 require 和 define。

使用define定义一个可以被其他代码使用的模块。通常，define 将用于 javascript 文件。

当您没有定义模块但需要已定义的模块时使用require。一般在HTML页会用到require。 HTML 页面不是模块，但需要模块才能将页面呈现给用户。

另外，在使用dojo的时候尽量避免使用prototype。您可以使用 'dojo/_base/declare' 创建模块构造函数。

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

现在您返回的是对象实例而不是构造函数。所以基本上，您正在尝试创建一个单例模块。对吗？

另外，确保在另一个模块或 require 方法中 require 时的模块路径是正确的。如果您在控制台中收到未定义的模块异常，则可能是其他问题。

希望这对您有所帮助。

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

Calling a method of an object from another AMDjs unit?

dojo

amd