我正在使用 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');
}
}
示例用法:
最佳答案
这是一个范围问题。在混合使用 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"); });
当您需要引用许多小部件/节点时,这很有用。
关于Javascript - Dojo - 对象对自身的引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8480919/