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

Question

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

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

<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可以从JS逻辑(viewmodel.js等)中通过从ViewTemplate实例传递来使用。
• 可以在view.html中使用，也可以在组件特定的。css文件中作为标签{comp. html}使用。uid}将被一个特殊的ViewTemplate逻辑替换，就像用于'nls'替换一样(参见view-template.js的第105行)。

这当然有效，但复杂性太大，开发人员无法理解。因此，在BoilerplateJS的后续版本中，我删除了这个功能，并让开发人员按照您上面建议的那样手动管理元素id。

我仍然不知道什么是最好的方法。但目前我相信手动管理它会导致更干净的代码。

Answer 2

另一个选择是简单地将input放入label中，像这样:

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