Emberjs-tmp-inp-hlpr-txt-area

EmberJS-テンプレート入力ヘルパーテキストエリア

これは、ユーザーが無制限の数の文字を入力できる複数行のテキストフォームフィールドです。 textareaは、テキストの値を現在のコンテキストにバインドします。

_ \ {\ {textarea}} _は、次のプロパティをサポートしています-

• 値
• name
• rows
• cols
• プレースホルダー
• 無効
• 最大長
• tabindex
• selectionEnd
• selectionStart
• selectionDirection
• wrap
• 読み取り専用
• オートフォーカス
• form
• スペルチェック
• 必須

構文

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

例

以下の例では、複数行のテキスト入力コントロールを指定して、無制限の数の文字を入力しています。 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'));
      }
   }
});

出力

emberサーバーを実行します。次の出力が表示されます-

Ember.jsテンプレートテキストエリア

あなたがリンクをクリックすると、テキストエリアが表示され、テキストを入力して送信ボタンをクリックします-

Ember.jsテンプレートテキストエリア

今すぐ送信ボタンをクリックすると、下のスクリーンショットに示すように結果が表示されます-

Ember.jsテンプレートテキストエリア