emberjs中表單輸入控件的可重用佈局

Question

我想創建一個視圖佈局，我可以重複使用多種表單輸入控件。例如，所有形式的投入將有：

• 標籤
• 某種輸入控制的
• 幫助文本
• 一種用於驗證錯誤消息佔位符

這是怎麼回事在整個應用程序中成爲一個一致的組件。實例之間唯一會改變的是輸入組件。例如，它可以是文本字段，文本區域，選擇，單選按鈕或其他。

看起來這將有可能提取這種成某種模板，只是換出的輸入控制位：

<label {{bindAttr for=view.someId}}>{{view.label}}</label> 
{{something-goes-here}} 
<span class="help-inline">{{view.help}}</span> 
<span class="validation">{{view.validation}}</span> 

我不知道這甚至有可能，但。它看起來像一個視圖佈局可能是要走的路，但由於某種原因自動關閉的標籤不得有佈局，所以：

{{view Ember.TextField layout=myControlLayout ...}} 

是出了問題（如一個側面說明，爲什麼是這樣嗎？）

只能使用視圖才能做到這一點嗎？或者一個把手幫手是否更合適？

我的問題與this one非常相似，但不同之處在於我希望能夠使用我的視圖和的任何內容。

Answer 1

鑑於設置輸入元素的佈局是一個不行（我不完全確定爲什麼這是），我建議你創建一個視圖與你想要的佈局，並用它來包裹每個輸入控件在您的模板中。 {{yield}}助手標記輸入控件的去向。

模板：

<script type="text/x-handlebars" data-template-name="input-control"> 
    <label {{bindAttr for=view.inputId}}>{{view.label}}</label> 
    {{yield}} 
    <span class="help-inline">{{view.help}}</span> 
    <span class="validation">{{view.validation}}</span> 
</script> 

查看：

App.FormElementView = Ember.View.extend({ 
    layoutName: 'input-control', 

    // defaults 
    inputId: '', 
    label: 'Input:', 
    help: 'Enter text above.', 
    validation: '' 
}); 

每當你介紹的輸入控制，敷在這一觀點。在開始的{{view}}標記中覆蓋所需的任何默認值。

<script type="text/x-handlebars" data-template-name="index"> 
    {{#view App.FormElementView 
     label="My input:" 
     help="This is where the input goes" 
     inputId="my_input" 
     validationBinding="validation"}} 

     {{input value=value id="my_input"}} 

    {{/view}} 
</script> 

在這種情況下，我將驗證字符串映射到我的控制器中的一個計算屬性。

App.IndexController = Ember.Controller.extend({ 
    value: "", 
    validation: function() { 
     return $.trim(this.get('value')).length > 0 ? 'Looks good.' : 'Type something.';    
    }.property('value') 
}); 

Here's the jsfiddle.