可点击的道场标签答案

【问题标题】：Clickable dojo labels可点击的道场标签
【发布时间】：2019-10-02 20:55:32
【问题描述】：

如果您正在使用 dojo 表单输入并希望为它们提供这样的标签：

<label for="???">Email</label>
<input
  type="text"
  name="email"
  dojoAttachPoint="email"
  dojoType="dijit.form.TextBox"
/>

标签不可点击，因为在渲染之前无法知道输入的 id。

除了在 dojo 为该元素生成的 id 中破解 id 之外，是否存在解决方案？

更新

实际上比我想象的还要难，因为dojo中的输入字段被渲染为

<div class="dijit dijitTextBox" id="widget_dijit_form_TextBox_0">
  <input class="dijitReset dijitInputField" value="Χ" type="text" tabindex="-1">
  ...
</div>

并且底层输入字段没有id

【问题讨论】：

标签： javascript dojo

【解决方案1】：

您是否尝试为输入提供 id？

<label for="myIdComesHere">Email</label>
<input
  id="myIdComesHere"
  type="text"
  name="email"
  dojoAttachPoint="email"
  dojoType="dijit.form.TextBox"
/>

如果我没记错的话，这个 id 可以被 dojo.byId（获取 domNode 也就是输入标签）和 dijit.byId（获取 dijit Widget 实例）使用。

【讨论】：

此解决方案仅适用于简单情况。想象一下在模板中有一个带有这个标签和输入的小部件。现在，如果您想在同一页面上放置同一个小部件的多个副本，如果您使用 ids，您将遇到麻烦。您通常避免使用 id 并使用 dojoAttachPoint 来引用 JS 中元素的特定实例。基本上，库中似乎缺少 dijit.form.Label 可以使用 dojoAttachPoint 而不是 id 进行附加，这意味着可能是时候编写 dojox.form.Label ;)
好吧，“在道场生成的 id 中进行黑客攻击”并没有那么糟糕：P

【解决方案2】：

如果您在小部件内创建表单，则可以使用this.id 来获取该小部件实例的 ID。

如果您的小部件名为my.form，则小部件的 ID 将为 my_form_0，并且会随着创建的每个新表单小部件而增加。

要为表单元素创建唯一 ID，请使用

var id = this.id + '_email';

'<label for="' + id + '"/>'
'<input type="text" id="' + id + '"/>'

这会给你

<label for="my_form_0_email"/>
<input type="text" id="my_form_0_email"/>

如果您使用 dijit.form.TextBox 创建输入，该文本框将始终在您的页面上具有唯一 ID。小部件内的实际<input> dom 元素将具有通过获取小部件ID 找到的ID。

如果您以编程方式创建 TextBox，您可以执行以下操作：

var tb = new dijit.form.TextBox(),
    label = dojo.create("label", {for: tb.id});

【讨论】：

【解决方案3】：

如果你不关心与IE的兼容性，你可以将输入放在标签内：

<label><input type=checkbox>hello</label>

【讨论】：

一个敏锐的观察。让我们把它作为练习留给读者，好吗？ <label>name:<input type=text></label>'
遇到与 OP 相同的问题。这似乎是一个简单的选择。唯一的缺点是，以这种方式对某些视觉设计进行样式设置变得更加困难。在这些情况下，moonsspoon 似乎有更好的方法。 +1 用于简单的用例解决方案

【解决方案4】：

正如 Brian Mathews 所说，诀窍是使用小部件的 id，但在 javascript 中没有必要这样做，您可以在声明小部件模板时这样做

<label for="${id}_email"/>
<input type="text" id="${id}_email"/>

【讨论】：