Question

我有一个名为ImageBox的小部件，它只是在另一个名为SlideBox的小部件中进行一些简单的解析和图像定位。

解析后的ImageBox节点结构的示例结构（我在控制台中看到的）：

<div class="textwrapper">
    <div class="text">
         <h2>Title of Image</h2>
    </div>
</div>

完整SlideBox的示例结构：

<div data-dojo-type="dj/SlideBox" widgetid="SlideBox_1">
    <div data-dojo-type="dj/ImageBox" widgetId="ImageBox_1">
        <!-- It's here!! Right here!! -->
        <div class="textwrapper">
            <div class="text">
             <h2>Title of Image</h2>
            </div>
        </div>
    </div>
</div>

在ImageBox postCreate方法中，我试图找到textwrapper div的高度，但所有使用任何dijit注册表方法查询或查找小部件的尝试都没有返回任何内容。

注意，textwrapper和text div是使用dojo创建的，而不是在原始标记中。

我可以看到小部件，它就在那里，我可以看到我正在尝试访问的.textwrapper div。似乎有一些订单的东西或某种方式Dojo处理小部件解析。

如何在窗口小部件中找到窗口小部件？

Answer 1

您通常会使用registry.findWidgets方法查找节点下方的小部件。正如参考指南中所提到的，findWidgets不会递归地在小部件中找到小部件... ...

但是在你的情况下，在widget的模板中为你的textwrapper div设置一个data-dojo-attach-point就足够了。像这样的东西可以在你的ImageBox的模板html文件中：

<div class="${baseClass}">
    <div class="textwrapper" data-dojo-attach-point="textwrapper"></div>
</div>

然后，您可以使用以下内容引用ImageBox小部件中的textwrapper div：

postCreate: function() {
    // use this.textwrapper to access the textwrapper div, e.g. like:
    var contentBox = domGeom.getContentBox(this.textwrapper);
    ....
}

Answer 2

根据要求移动对OP答案的评论：要访问子窗口小部件，请等到postCreate（）之后，以便将子窗口小部件添加到DOM中。

然后可以从容器窗口小部件的startup（）方法访问子窗口小部件，根据窗口小部件生命周期 - http://dojotoolkit.org/documentation/tutorials/1.8/understanding_widgetbase/

Answer 3

这看起来有点像hacky，但它确实有效。通过在基类的dojo/ready中添加postCreate调用，我可以等到完成所有操作，然后进行查询。

我已经为每个小部件的生命周期添加了一些log（）调用，并且我发现ImageBox最后一次触发，因此我放入包含postCreate的任何内容都不会看到任何小部件中心属性这是孩子们的。将ready()调用添加到包含小部件的postCreate()会颠倒日志调用的顺序，从而有效地使其等待所有依赖项在继续之前加载。

在Dijit中寻找Dijits

3 个答案: