Question

想象一下，您的应用程序中有多个组件，每个组件都有自己的视图。

虽然组件是独立的，但它们的视图可能对DOM元素使用相同的标识符，例如2个或更多组件有可能具有类似输入控件的视图，如：

<label for="Bid">Bid</label>
<input type="text" id="Bid" name="Bid" value="0"/>

激活组件后，他们的视图会通过Boiler.ViewTemplate附加到DOM，现在Bid元素存在名称冲突，导致副作用，例如点击label只能在1个视图中使用，而在其他视图中禁用。

避免此类碰撞的最佳做法是什么？我应该为我的观看中的所有元素使用“唯一”后缀/前缀，例如id="ComponentName_Bid"吗？还是有更优雅的解决方案？

Answer 1

这确实是一个非常好的问题。我也经常多次挣扎。不久之后，我做了一个为每个ViewTemplate实例提供自动生成的唯一ID的实现。

可以从JS逻辑（viewmodel.js等）中使用此UID，方法是从ViewTemplate实例传递它。
这可以由view.html以及特定于组件的.css文件用作标记{comp.uid}，它将被特殊的ViewTemplate逻辑替换，就像用于'nls'替换一样（参见line 105在view-template.js）。

当然有效，但复杂性太大，开发人员无法理解。因此，在更高版本的BoilerplateJS中，我删除了此功能，并允许开发人员按照上面的建议手动管理elementID。

我仍然不知道最好的方法是什么......但目前我认为手动管理会产生更清晰的代码。

Answer 2

另一种选择是简单地将input放在label内，如下所示：

<label>
   Last Name
   <input type="text" name="lastname" />
</label>