我想创建一个可以重复用于多种表单输入控件的 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 与任何内容一起使用。
最佳答案
鉴于设置输入元素的布局是不行的(我也不完全确定为什么会这样),我建议您创建一个具有所需布局的 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')
});
关于ember.js - emberjs 中表单输入控件的可重用布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16874660/