避免視圖中元素名稱衝突的最佳做法 - BoilerplateJS

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。

• 通過從ViewTemplate實例傳遞它，可以從JS邏輯（viewmodel.js等）使用此UID。
• 這可以被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>