Emberjs-tmp-inp-hlpr-txt-flds

EmberJS-テンプレート入力ヘルパーテキストフィールド

テキストフィールドは、ユーザーがデータを入力できる入力フィールドを提供します。 以下は、入力ヘルパー内で使用できる属性です-

'readonly'	'required'	'autofocus'
'value'	'placeholder'	'disabled'
'size'	'tabindex'	'maxlength'
'name'	'min'	'max'
'pattern'	'accept'	'autocomplete'
'autosave'	'formaction'	'formenctype'
'formmethod'	'formnovalidate'	'formtarget'
'height'	'inputmode'	'multiple'
'step'	'width'	'form'
'selectionDirection'	'spellcheck'	'type'

構文

{{input type = "type-of-input" value = "name-of-input-element"}}

例

以下の例は、入力ヘルパーでのテキストフィールドの使用法を指定しています。 テキストフィールドとして名前でルートを作成し、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('textfield');
});

export default Router;

次のコードで_app/templates/_の下に作成されたファイル_application.hbs_ファイルを開きます-

<h2>Input Helper Text Field</h2>
{{#link-to 'textfield'}}Click Here{{/link-to}}
{{outlet}}

あなたがリンクをクリックすると、ページは次のコードを含む_textfield.hbs_ファイルを開く必要があります-

Enter Name : {{input type = "text" placeholder = "Enter the name" value = name}}
<button {{action "send"}}>Send</button>
{{outlet}}

次のコードで_app/routes/_の下に作成された_textfield.js_ファイルを開きます-

import Ember from 'ember';

export default Ember.Route.extend ({
   model: function () {
     //initializing the variable 'name' as null by using create method
      return Ember.Object.create ({
         name: null
      });
   }
});

今、次のコードで_app/controllers/_の下に作成された_textfield.js_ファイルを開きます-

import Ember from 'ember';

export default Ember.Controller.extend ({
   actions: {
     //this actions get the name from the text field
      send: function () {
         document.write('Name is: ' + this.get('name'));
      }
   }
});

出力

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

Ember.jsテンプレートテキストフィールド

あなたがリンクをクリックすると、入力フィールドが表示され、ユーザーがデータを入力できるようになります-

Ember.jsテンプレートテキストフィールド

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

Ember.jsテンプレートテキストフィールド