Question

我有一个自定义小部件，里面有一个WidgetList。当WidgetList中的复选框被选中时，我需要在我的自定义小部件中调用一个函数，但似乎我在这里的范围之外;

我在每个列表项的范围内：lang.hitch：scope [＆＃34; topCheck＆＃34;]为null（范围=＆＃34; [Widget dojox.mvc.Templated，dojox_mvc_Templated_25] ＆＃34;）

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

你（和/或自愿回答这个问题的人）可能已经想出来了，但这里的诀窍是：拥有包含复选框的模板的小部件既不是小部件列表，也不是包含小部件的自定义小部件名单。相反，它是小部件列表隐式创建的小部件（子小部件）。

您可以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>

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

-Srikant

Answer 3

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

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

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

在widget上使用widgetlist和data-dojo-attach-event的自定义小部件

3 个答案: