带有 widgetlist 和 data-dojo-attach-event 的自定义小部件

Question

我有一个自定义小部件，里面有一个小部件列表。当 WidgetList 中的复选框被选中时，我需要在我的自定义小部件中调用一个函数，但似乎我超出了它的范围；

我在每个列表项的范围内：lang.hitch: scope["topCheck"] 为 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) {

        }
    });
});

有人知道如何实现吗？

Answer 1

我认为您可以将复选框更改为 dijit.form.CheckBox 或将 dojo 附加点附加到它。下面是一个示例代码。

postCreate: function () {
  this.inherited(arguments);
  console.log(this.testCheckBox);
  this.testCheckBox.onchange = this.topCheck; //Here this stands for the custom widget
},

<input id="" type="checkbox" data-mvc-bindings="value: at('rel:', 'id'), checked: at('rel:', 'visible')" data-dojo-attach-point="testCheckBox" />

-斯里坎特

Answer 2

所以我通过创建另一个自定义小部件来解决这个问题，将每个项目保存在我的小部件列表中，向我的复选框添加了一个附加点，并将事件附加到自定义小部件的 postCreate 中。

这可能看起来像上面的建议答案，不同之处在于没有内部自定义小部件，附加点将属于另一个小部件； this.someAttachpoint 不起作用，因为它属于小部件列表中的一个小部件，而不是我的自定义小部件

我将不得不使用 registry.byId 来获取它。

Answer 3

您（and/or 自愿回答此问题的人）可能已经弄明白了，但诀窍在于：拥有包含复选框的模板的小部件既不是小部件列表也不是自定义包含小部件列表的小部件。相反，它是小部件列表隐式创建的小部件（子小部件）。

您可以通过 data-mvc-child-type (ref) 为这些子窗口小部件使用您喜欢的 class。通过在那里使用自定义 class ，您可以调用可能实现您的目标的父小部件（例如包含小部件列表的小部件）的方法。这是一个例子：

<!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>

带有 widgetlist 和 data-dojo-attach-event 的自定义小部件

Custom widget with widgetlist and data-dojo-attach-event on children

javascript

model-view-controller

dojo