我有一个自定义小部件，里面有一个 WidgetList。 当选中 WidgetList 中的复选框时，我需要在自定义小部件中调用一个函数，但似乎我超出了它的范围；
我在每个列表项的范围内:lang.hitch:scope["topCheck"] is null (scope="[Widget dojox.mvc.Templated, dojox_mvc_Templated_25]")
标记: 我想将复选框的更改事件附加到自定义小部件上的 topCheck 函数。
<div>
<script type="dojo/require">
at: "dojox/mvc/at"
</script>
<div data-dojo-type="dojox/mvc/WidgetList"
data-dojo-mixins="dojox/mvc/_InlineTemplateMixin"
data-dojo-props="children: at(this, 'fModel')">
<script type="dojox/mvc/InlineTemplate">
<li>
<input id="" type="checkbox" data-mvc-bindings="value: at('rel:', 'id'), checked: at('rel:', 'visible')" data-dojo-attach-event="change: topCheck" />
<label data-mvc-bindings="innerHTML: at('rel:', 'id'), for: at('rel:', 'id')"></label>
</li>
</script>
</div>
</div>
自定义小部件js:
define([
"dojo/_base/declare",
"dojo/on",
"dojo/parser",
"dojox/mvc/StatefulArray",
"dojox/mvc/at",
"dojox/mvc/WidgetList",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/Evented",
"dojox/mvc/parserExtension",
"dojox/mvc/_InlineTemplateMixin"
], function (
declare, on, parser, StatefulArray, at, WidgetList, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Evented) {
return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Evented], {
templateString: template,
constructor: function (args, srcNodeRef) {
declare.safeMixin(this, args);
this.fModel = new StatefulArray();
},
postCreate: function () {
this.inherited(arguments);
},
topCheck: function (e) {
}
});
});
有人知道如何实现这个目标吗？
最佳答案
您(和/或自愿回答这个问题的人)可能已经弄清楚了，但这里有一个技巧:拥有包含复选框的模板的小部件既不是小部件列表，也不是包含该小部件的自定义小部件列表。相反，它是小部件列表隐式创建的小部件(子小部件)。
您可以通过data-mvc-child-type (ref)为这些子小部件使用您想要的类。通过在那里使用自定义类，您可以调用父窗口小部件(例如包含窗口小部件列表的窗口小部件)的方法来实现您的目标。这是一个例子:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/resources/dojo.css">
<script id="custom-widget-with-widgetlist-template" type="dojox/mvc/InlineTemplate">
<div>
<div data-dojo-type="dojox/mvc/WidgetList"
data-dojo-props="children: at(this, 'list')"
data-mvc-child-type="custom.Item">
</div>
</div>
</script>
<script id="item-template" type="dojox/mvc/InlineTemplate">
<li>
<input id="${id}-check" type="checkbox" data-mvc-bindings="value: at('rel:', 'name'), checked: at('rel:', 'visible')" data-dojo-attach-event="change: checkboxChanged" />
<label for="${id}-check" data-mvc-bindings="innerHTML: at('rel:', 'name')"></label>
</li>
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js" data-dojo-config="async: 1, parseOnLoad: 0"></script>
<script type="text/javascript">
require([
"dojo/_base/declare",
"dojo/parser",
"dijit/registry",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojox/mvc/StatefulArray",
"dojox/mvc/WidgetList",
"dojox/mvc/parserExtension"
], function(declare, parser, registry, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, StatefulArray){
declare("custom.Widget", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: document.getElementById("custom-widget-with-widgetlist-template").innerHTML,
constructor: function(args){
declare.safeMixin(this, args);
this.set("list", new StatefulArray([
{
name: "foo",
visible: true
},
{
name: "bar",
visible: false
}
]));
},
checkboxChanged: function(){
console.log("Check box changed!");
}
});
declare("custom.Item", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: document.getElementById("item-template").innerHTML,
checkboxChanged: function(event){
// WidgetList's child instance -> WidgetList -> Custom widget containing WidgetList
registry.byNode(this.domNode.parentNode.parentNode).checkboxChanged(event);
}
});
parser.parse();
});
</script>
</head>
<body>
<script type="dojo/require">
at: "dojox/mvc/at"
</script>
<div data-dojo-type="custom.Widget"></div>
</body>
</html>
关于javascript - 带有 widgetlist 和 data-dojo-attach-event 的自定义小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30125892/