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来创建按钮。基本上，你有三种方法：

以编程方式创建按钮，直接或通过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();

为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");

基于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");
});

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

Answer 2

我没有真正使用Dojo，但我尝试了一些东西。看起来你可以像平常一样使用它。试试这个演示：http://jsfiddle.net/dSpsr/11/

Javascript - Dojo - 对象引用自身

2 个答案: