Ember.js emberjs中表单输入控件的可重用布局

我想创建一个视图布局，可以用于多种表单输入控件。例如，所有表单输入都将具有：

• 标签
• 某种输入控制
• 帮助文本
• 用于验证错误消息的占位符

这将是整个应用程序中一致的组件。实例之间唯一会改变的是输入组件。例如，它可以是一个文本字段、文本区域、选择、单选按钮或任何内容

似乎可以将其提取到某种模板中，然后交换输入控制位：

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

这是不可能的（作为旁注，这是为什么？）

是否可以仅使用视图来执行此操作？还是车把助手更合适

---

我的问题与非常类似，但不同之处在于，我希望能够将我的视图用于任何内容。

鉴于设置输入元素的布局是不可行的（我也不清楚为什么会这样），我建议您创建一个具有所需布局的视图，并使用它在模板中包装每个输入控件。

{{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>

每当引入输入控件时，请在此视图中包装它。覆盖打开的

{{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.FormElementView = Ember.View.extend({
    layoutName: 'input-control',

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

<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')
});