Javascript - Dojo - 对象对自身的引用

Question

我正在使用 Dojo JS 框架 1.6 来声明和跟踪自定义类。我想使用这些类来创建可重用的功能，例如用户编辑对话框等。

然而，问题是当使用类中的方法创建一个 dojo html 类型的按钮时。如果该按钮随后需要在类中调用方法，它不知道要调用的实例化变量..

如何在不对对象名称进行硬编码的情况下让 stage2 引用该类的实例？

示例类:

dojo.provide('edit.contacts');
dojo._hasResource["edit.contacts"] = true;

dojo.declare("edit.contacts", null,
{
   /*
   *     Init
   */
   init   : function(customer_id)
   {
      var out = ''
      +'<button dojoType="dijit.form.Button" onClick="stage2();" />Edit</button>'
      +'';

      // Create the dlg box
      var edit_contacts_dlg = new dijit.Dialog(
      {
         title    : 'New Diag',
         style    : 'width:550px; height:600px;background:#FFFFFF;',
         id       : 'edit_contacts_dlg',
         content  : out
      }).show();
   },

   /*
   *     Stage 2
   */
   stage2   :  function()
   {
      alert('halllo');
   }
}

示例用法:

Answer 1

这是一个范围问题。在混合使用 JS 和 HTML 来创建节点或小部件时，您将始终面临此类问题。在调用 init() 方法时，您需要对按钮小部件实例的引用，但您没有这个实例，因为您使用 HTML 和 dojo.parser 来创建按钮。基本上，您有三种出路:

1. 以编程方式创建按钮并直接或通过 dojo.connect 为它提供 onClick。这是非常灵活的，因为您可以使用范围内的任何变量从字面上将任何函数传递给 onclick。

   var out = new dijit.form.Button({
       label: 'Edit',
       onClick: dojo.hitch(this, 'stage2')
   });
   var edit_contacts_dlg = new dijit.Dialog({
       title    : 'New Diag',
       style    : 'width:550px; height:600px;background:#FFFFFF;',
       id       : 'edit_contacts_dlg_' + uniqueId,
       content  : out
   }).show();
   

2. 为 edit.contants 类的每个实例生成唯一 ID，并将其插入到您的 html 字符串中。然后通过 dijit.byId() 获取按钮的实例并执行上述连接:

   var out = '<button dojoType="dijit.form.Button" id="' + uniqueId + '">Edit</button>';
   var edit_contacts_dlg = new dijit.Dialog({
       title    : 'New Diag',
       style    : 'width:550px; height:600px;background:#FFFFFF;',
       id       : 'edit_contacts_dlg_' + uniqueId,
       content  : out
   }).show();
   var btn = dijit.byId(uniqueId);
   dojo.connect(btn, "onClick", this, "stage2");
   

3. 基于dijit._Widget和dijit._Templated创建类，即widget，并使用其data-dojo-attach-point特性获取按钮实例(see it in action at jsFiddle):

   dojo.require("dijit._Widget");
   dojo.require("dijit._Templated");
   dojo.require("dijit.Dialog");
   dojo.require("dijit.form.Button");
   
   dojo.ready(function() {
   
       dojo.declare("edit.ContactTemplate", [dijit._Widget, dijit._Templated], {
           templateString: '<div><button data-dojo-type="dijit.form.Button" data-dojo-attach-point="editBtn">Edit</button></div>',
           widgetsInTemplate: true    
       }) 
   
       dojo.declare("edit.contacts", null, {
   
           init: function(customerId) {
               this.customerId = customerId;
   
               var widget = new edit.ContactTemplate();
               dojo.connect(widget.editBtn, "onClick", this, "stage2");
   
               this.editContactDlg = new dijit.Dialog({
                   title    : "Dialog: " + customerId,
                   style    : "width:200px;height:80px;background:#FFFFFF;",
                   id       : "edit_contacts_dlg_" + customerId,
                   content  : widget
               });
   
               this.editContactDlg.show();
               return this;
           },
   
           stage2:  function() {
               alert(this.customerId);
           }
       });
   
       var c1 = new edit.contacts().init("customer #1");
       var c2 = new edit.contacts().init("customer #2");
   });
   

当您需要引用许多小部件/节点时，这很有用。