ember.js不{{bindAttr}} <label>對於集合中正確的inputField.elementId

我試圖使用{{bindAttr}}和輸入字段的[的viewName] .elementId。它在單個條目視圖中工作，但不是在顯示多條記錄時：它只是將標籤鏈接到集合中的最後一個輸入字段。（這適用於使用的是老燼庫在先前的反覆工作，但現在它does not。）我創建了一個fiddle，但它的要點是：ember.js不{{bindAttr}} <label>對於集合中正確的inputField.elementId

{{#each controller}} 
    <fieldset>    
     <label {{bindAttr for="view.tbFullName.elementId"}}>Full Name</label> 
     {{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}        
    </fieldset> 
{{/each}}

我想也許我可以創建的CollectionView和創建viewName的計算屬性，它將爲集合中的每個項目生成一個唯一的ID，在回答另一個問題here時提及。但是，這樣做太複雜了 - 只要用戶點擊相應的標籤，我就可以讓輸入字段自己突出顯示。

任何幫助表示讚賞。

來源

2013-07-09 user2192333

圍繞標籤和輸入字段創建一個包裝Ember.View。讓我們把它叫做App.FieldView：

App.FieldView = Ember.View.extend({ 
    tagName: 'fieldset' 
});

在你的模板

然後：

{{#each controller}} 
    {{#view App.FieldView}}    
    <label {{bindAttr for="view.tbFullName.elementId"}}>Full Name</label> 
    {{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}        
    {{/view}} 
{{/each}}

小提琴：http://jsfiddle.net/NQKvy/26/

來源

2013-07-09 22:57:07

謝謝！作品一種享受。 – user2192333

形式有點棘手我必須承認，如果你想做正確的事情。但是有一個可以用來解救的餘燼插件，例如easyForm。

看看它可能可以幫助你解決你確切所面臨的問題，就像那些在具有爲您的表單字段等

希望它可以幫助獨特的標籤。

來源

2013-07-09 20:12:46 intuitivepixel

這是有趣的知道easyForm存在。我想我現在會繼續手動建立我的表格，以便我能夠了解我對Ember的理解。在這一點上，我也很擔心依賴另一個庫。非常感謝。 – user2192333

帕納約蒂斯Panagi，正確地回答了這個問題。我只會補充爲什麼會發生這種情況，即： - 鏈接到錯誤的視圖。

模板內的view屬性引用了Ember視圖包裝html標記。然而，該屬性取決於它所處的上下文具有不同的值。

該值取決於它放置的視圖塊。默認情況下，模板本身對應於在這種情況下的視圖，ListOfPeopleTemplateView。

因此，當您綁定到view.tbFullName.elementId時，您實際上綁定到{instance of ListOfPeopleTemplateView}.tbFullName.elementId。當循環結束時，唯一可見的tbFullName是最後一個。

帕納約蒂斯Panagi的解決方案是包裝另一視圖內的標籤，所以view變化在該塊中的值，並因此指向正確tbFullName

最後一個更簡單的方法來實現相同的結果是將文本字段包裝在標籤內。那麼你根本就不需要綁定label for。

<label>Full Name 
    {{view App.DetailTextField viewName="tbFullName" placeholder="Full Name" valueBinding="fullName" readonly="readonly"}}  
</label>

看到這個jsfiddle

來源

2013-07-10 04:16:51

感謝您在@ panagiotis-panagi上回答問題。如果我能理解爲什麼能讓事情順利進行，但更好。並將輸入字段包裹在標籤內 - 這種簡單的解決方案！但是這樣做會有什麼副作用嗎？圍繞'label'和'label for'的 – user2192333

基本上是一樣的。當文本字段的標籤遠離文本字段並且不能被它包圍時，'label for'有助於幫助。 –

ember.js不{{bindAttr}} <label>對於集合中正確的inputField.elementId

回答

相關問題