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

Question

我想创建一个可以重复用于多种表单输入控件的 View 布局。例如，所有表单输入都将具有:

一个标签

某种输入控件

帮助文字

验证错误消息的占位符

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

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

<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 布局可能是要走的路，但由于某种原因，自闭标签不允许有布局，所以:

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

是不可能的(作为旁注，这是为什么？)

仅使用 View 可以做到这一点吗？还是 Handlebars 助手更合适？

我的问题与 this one 非常相似，但不同之处在于我希望能够将我的 View 用于任何内容。

Answer 1

鉴于设置输入元素的布局是行不通的(我也不完全确定为什么会这样)，我建议您创建一个具有所需布局的 View 并使用它来包装模板中的每个输入控件。 {{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 中。在开头 {{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>

在这种情况下，我将验证字符串映射到 Controller 中的计算属性。

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.