带有小部件列表和子级上的data-dojo-attach-event的自定义小部件

Lars Anundskås 发表于 Dev

拉尔斯·安德斯卡斯（LarsAnundskås）

我有一个带有WidgetList的自定义窗口小部件。我需要调用一个函数在我的自定义窗口小部件时在的widgetList复选框被选中，但似乎我它的范围在这里进行;

我在每个列表项的范围内：lang.hitch：scope [“ topCheck”]为空（scope =“ [Widget dojox.mvc.Templated，dojox_mvc_Templated_25]”）

标记：我想将复选框的change事件附加到自定义小部件上的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>