子部件在 Dojo 中不会渲染（高度为 0）

Posted 2023-02-16

【中文标题】子部件在 Dojo 中不会渲染（高度为 0）

【英文标题】：Sub-widgets won't render (will have 0 height) in Dojo

【发布时间】：2012-11-30 09:33:00

【问题描述】：

看看这个简单的小提琴：

http://jsfiddle.net/mercmobily/y4uG2/10/

基本上我声明一个小部件，然后开始添加子小部件。有一次，我有子小部件“部分”，它是一个带有标签容器和子标签的模板化小部件。

主要小部件有：

'<div data-dojo-type="Section" data-dojo-props="title: \'Sub Widget\'" data-dojo-attach-point="section"></div>' +

那个“部分”小部件有：

  templateString: '' +
    '  <div>' +

    '    <div class="subWidget" data-dojo-type="dijit.layout.TabContainer" tabPosition: \'left-h\'" dojo-attach-point="tabCont" >' +

      '      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Second Widget one\'">Second Widget One</div>' +
      '      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: \'Second Widget Two\'">Section Widget Two</div>' +

      '    </div>'+
    '    </div>'

现在，我很难让子小部件“部分”正确渲染。 在我现在的实际程序中，我玩过：

做模板 CSS 中的高度属性 从主小部件捕获 resize() 并在子小部件中调用 resize()

（关于第 (3) 点，我不得不这样做：

调整大小：函数（） this.inherited(参数); console.log("在调用的主小部件中调整大小！"); this.settingsTab.resize();

在这一点上，我要疯了，因此问题是：接受、正常和常见方法是什么来确保，在小提琴中，当您实例化主小部件时会呈现子小部件？

另外，我是否需要为我曾经使用过的每个标签容器指定 height:100% ？ （好像是这样）

谢谢！

更新

我更新了小提琴。此时，我向选项卡容器添加了“高度”。在那之后，调整浏览器窗口的大小实际上可以解决问题（！）。我不太清楚为什么我需要那个高度，但是好的。

http://jsfiddle.net/mercmobily/y4uG2/16/

当用户单击“损坏的”小部件时，我还执行了 on()，并且 -- 猜猜看 -- resize 运行并且渲染良好。

这更没有意义。为什么我自己的小部件的行为与模板中定义的有任何不同？我开始了各种各样的理论：例如，高度无法计算，因为它没有显示出来。但是，SAME 应该应用于带有子选项卡的 other 选项卡，在左侧标记为“复杂”！

我没有想法。不，真的。

【问题讨论】：

嗨 Merc 我有点面临类似的问题，但我的主小部件不是 TabContanier，但作为选项卡容器的子小部件在我的主小部件中未正确呈现。当主页加载时，不会显示任何选项卡。有什么建议吗？

【参考方案1】：

确实有一个错字，正如 Frode 所提到的，但如果您希望标签内容出现在 SubWidget 中，您仍然需要单击其中一个标签。

我建议您更正错字并将您的小部件子类化为ContentPane 而不是_WidgetBase 来解决此问题，因为ContentPanes 知道如何调整自己的大小，如下所示：

declare('SubWidget', [ContentPane, _TemplatedMixin, _WidgetsInTemplateMixin], 

      templateString: ''...

见http://jsfiddle.net/psoares/YwWst/

顺便说一句，1.8 中不需要指定widgetsInTemplate : true。加_WidgetsInTemplateMixin就够了……

【讨论】：

嗨菲利普。我接受了你的回答，因为它引导我朝着正确的方向前进。现在...你能告诉我为什么jsfiddle.net/mercmobily/y4uG2/23 如果你调整窗口大小，标签SubWidget 增长的大小；如果你把它变成一个 ContentPane，在屏幕空间之外写“在标签之后”？

好吧，您必须考虑在制表符之前编写的文本的大小。如果将高度设置为 100%，它将与父框具有相同的高度，因此基本上您应该将 TabContainer 单独放在该 ContentPane 内（之前或之后没有文本）。如果您想在之前或之后添加文本，请将其放在其他内容窗格中，或者为您的选项卡容器提供

好的，但是您是否注意到每次调整内容窗格的大小时都会增长？这是我碰巧碰上的道场漏洞吗？

如果你扩展 ContentPane 而不是 _WidgetBase 没有问题...你为什么回到那个？

其实外部的ContentPane是没用的。您可以使用当前代码实现您想要的，但仅将 tabContainer 作为您的 SubWidget 的 domNode 的直接子级。见jsfiddle.net/psoares/y4uG2/26

【参考方案2】：

您的 SubWidget 中的 templateString 有错字。难道就这么简单吗？

...<div style="height:100%" data-dojo-type="dijit.layout.TabContainer" tabPosition: \'left-h\'" data-dojo-attach-point="tabContainer" >'...

应该是：

<div style="height:100%" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="tabPosition: \'left-h\'" data-dojo-attach-point="tabContainer" >'

这似乎可以解决你的问题：http://jsfiddle.net/y4uG2/18/