避免视图中元素名称冲突的最佳实践 - BoilerplateJS答案

【问题标题】：Best practice to avoid element name conflicts in views - BoilerplateJS避免视图中元素名称冲突的最佳实践 - BoilerplateJS
【发布时间】：2013-11-25 22:42:00
【问题描述】：

假设您的应用程序中有多个组件，每个组件都有自己的视图。

虽然组件是独立的，但它们的视图可以为 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"？还是有更优雅的解决方案？

【问题讨论】：

标签： javascript boilerplatejs

【解决方案1】：

这确实是一个非常好的问题。我也为此挣扎了很多次。前一段时间，我做了一个为每个 ViewTemplate 实例提供自动生成的唯一 ID 的实现。

这个 UID 可以通过从 ViewTemplate 实例传递来用于 JS 逻辑（viewmodel.js 等）。
这可以被 view.html 以及组件特定的 .css 文件用作标签 {comp.uid} 将被特殊的 ViewTemplate 逻辑替换，就像用于“nls”替换一样（见行105 at view-template.js）。

这当然行得通，但开发人员无法理解其复杂性。因此，在更高版本的 BoilerplateJS 中，我删除了此功能，并让开发人员按照您上面的建议手动管理 elementID。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：