定义了一个自定义Foo
小部件,它具有本地“bar”值。还有一个onClick函数可以将'bar'改为某个东西。
现在,Foo
的多个实例在HTML模板中定义为声明性,如下所示:
<input id="foo1" data-dojo-type="path-to-wiget/Foo">
<input id="foo2" data-dojo-type="path-to-wiget/Foo">
<input id="foo3" data-dojo-type="path-to-wiget/Foo">
问题是每个输入都应该有自己的foo
变量实例,但由于某种原因,它们的行为只有一个!
>> clicking foo1 -> foo1.foo = 'bar'
>> clicking foo2 -> foo2.foo = 'baz'.. but foo1.foo is set to 'baz' as well.. why?
如何确保每个小部件都有自己的foo
变量?
答案 0 :(得分:2)
在您的问题中,您尚未添加Foo.js
的代码,因此很难理解您的问题。
但是如果你想采用声明性方法data-dojo-type
,你可以考虑使用data-dojo-props
为每个实例传递你的属性。
在以下示例中,您在HTML标记中传递myProp
的值,当您使用dijit/registry
检索属性实例时,可以看到它已添加到属性实例中。
示例,请打开控制台:
https://jsfiddle.net/e5dx8nue/
<input id="foo1" data-dojo-type="dijit/form/Button" data-dojo-props="myProp: 'foo1'">
<input id="foo2" data-dojo-type="dijit/form/Button" data-dojo-props="myProp: 'foo2'">
<input id="foo3" data-dojo-type="dijit/form/Button" data-dojo-props="myProp: 'foo3'">
require(['dojo/parser', 'dijit/registry'], function(parser, registry) {
parser.parse().then(function() {
var widget1 = registry.byId('foo1'); // print foo1
var widget2 = registry.byId('foo2'); // print foo2
var widget3 = registry.byId('foo3'); // print foo3
console.log(widget1.myProp);
console.log(widget2.myProp);
console.log(widget3.myProp);
});
});