返回介绍

模板 - 输入助手

发布于 2020-02-21 15:48:02 字数 2571 浏览 994 评论 0 收藏 0

英文原文:http://emberjs.com/guides/templates/input-helpers/

Ember.js中的{{input}}{{textarea}}助手是创建通用表单控件最简单的方法。{{input}}包裹了Ember.js内置的Ember.TextFieldEmber.Checkbox视图,而{{textarea}}则包裹了Ember.TextArea视图。使用这些助手使得创建这些输入视图跟使用传统的<input><textarea>元素完全一样。

文本输入框

1
{{input value="http://www.facebook.com"}}

将会变为:

1
<input type="text" value="http://www.facebook.com"/>

可以将下列标准的<input>属性传给input助手:

  • value
  • size
  • name
  • pattern
  • placeholder
  • disabled
  • maxlength
  • tabindex

如果这些属性被设置为一个引号引起来的字符串,那么它们的值将被直接设置到元素上,如同上面的示例中一样。但是,如果没有使用引号,那么属性的值就会与模板当前渲染的上下文的一个属性进行绑定。例如:

1
{{input type="text" value=firstName disabled=entryNotAllowed size="50"}}

将绑定disabled属性到当前上下文的entryNotAllowed

复选框

通过设定{{input}}助手的type,可以创建复选框:

1
{{input type="checkbox" name="isAdmin" checked=isAdmin}}

复选框支持以下属性:

  • checked
  • disabled
  • tabindex
  • indeterminate
  • name

这些属性也可以与之前所说的一样进行设置,或者绑定。

多行文本输入框

1
{{textarea value=name cols="80" rows="6"}}

将绑定文本域的值到当前上下文的name属性。

{{textarea}}支持绑定或者设置如下属性:

  • rows
  • cols
  • placeholder
  • disabled
  • maxlength
  • tabindex

扩展内置控件

查看指南中内置视图一节来学习如何扩展视图。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文