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

Question

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

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

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

组件被激活后，它们的视图被Boiler.ViewTemplate附加到DOM，现在Bid元素有一个名称冲突，导致副作用，例如点击label只在一个视图中工作，而在其他视图中被禁用。

避免此类冲突的最佳实践是什么？我应该为我的视图中的所有元素使用“唯一的”后缀/前缀吗，比如id="ComponentName_Bid"？还是有更优雅的解决方案？

Answer 1

这确实是一个很好的问题。我也和它斗争过很多次。不久前，我实现了一个为每个ViewTemplate实例提供自动生成的唯一id的实现。

• 此UID可通过从ViewTemplate实例传递它从JS逻辑(viewmodel.js等)中使用。
• 此UID可由view.html以及组件特定的.css文件作为标记{comp.uid}使用，该标记将被特殊的ViewTemplate逻辑替换，就像用于'nls‘替换一样(参见ViewTemplate-template.js中的第105行)。

这当然是可行的，但其复杂性太高，开发人员无法理解。因此，在较新版本的BoilerplateJS中，我删除了此功能，并允许开发人员按照您上面的建议手动管理elementIDs。

我仍然不知道解决这个问题的最好方法是什么..但就目前而言，我相信手动管理它会带来更干净的代码。

Answer 2

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

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