当前位置: 首页 > 文档资料 > EmberJS 入门教程 >

Text Areas

优质
小牛编辑
130浏览
2023-12-01

它是一个多行文本表单域,用户可以输入无限数量的字符。 textarea将文本的值绑定到当前上下文。

{{textarea}}支持以下属性 -

  • value
  • name
  • rows
  • cols
  • placeholder
  • disabled
  • maxlength
  • tabindex
  • selectionEnd
  • selectionStart
  • selectionDirection
  • wrap
  • readonly
  • autofocus
  • form
  • spellcheck
  • required

语法 (Syntax)

{{textarea value = name cols = "width_of_textarea" rows = "number_of_lines"}}

例子 (Example)

下面给出的示例指定多行文本输入控件以输入无限数量的字符。 创建名为textarea的路由并打开router.js文件以定义URL映射 -

import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});
Router.map(function() {
   this.route('textarea');
});
export default Router;

使用以下代码打开在app/templates/下创建的application.hbs文件 -

<h2>Input Helper Textarea</h2>
{{#link-to 'textarea'}}Click Here{{/link-to}}
{{outlet}}

单击链接时,页面应打开textarea.hbs文件,其中包含以下代码 -

Enter text here: <br/><br/>{{textarea value = name cols = "15" rows = "5" 
   placeholder = "Message"}}<br/>
<button {{action "send"}}>Send</button>
{{outlet}}

使用以下代码打开在app/routes/下创建的textarea.js文件 -

import Ember from 'ember';
export default Ember.Route.extend({
   model: function () {
      return Ember.Object.create ({
         name: null
      });
   }
});

现在打开在app/controllers/下创建的textarea.js文件,代码如下 -

import Ember from 'ember';
export default Ember.Controller.extend({
   actions: {
      send: function () {
         document.write('Entered text is: ' + this.get('name'));
      }
   }
});

输出 (Output)

运行ember服务器; 你会收到以下输出 -

Ember.js模板Textarea

当您单击链接时,将显示textarea,输入文本并单击发送按钮 -

Ember.js模板Textarea

现在点击发送按钮,它将显示结果,如下面的截图所示 -

Ember.js模板Textarea