Emberjs-tmp-inp-hlpr-chk-bx

EmberJSテンプレート入力ヘルパーチェックボックス

これは、ユーザーがオンとオフを切り替えることができる四角形のボックスです。つまり、2つの可能なオプションのいずれかを選択できます。 チェックボックスは、次のプロパティをサポートしています-

• チェック済み
• 無効
• tabindex
• 不定
• name
• オートフォーカス
• form

構文

{{input type = "checkbox" name = "NameOfCheckBox" checked = NameOfCheckBox}}

例

以下の例では、入力ヘルパーのチェックボックスの使用方法を指定しています。 _checkbox_という名前のルートを作成し、_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('checkbox');
});

export default Router;

次のコードでapp/templates/の下に作成されたファイルapplication.hbsファイルを開きます-

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

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

{{input type = "checkbox" checked = checkMe}} Check Box
<button {{action "send"}}>Click the checkbox</button>
{{outlet}}

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

import Ember from 'ember';

export default Ember.Route.extend ({
   model: function () {
      return Ember.Object.create({
         checkMe: false
      });
   }
});

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

import Ember from 'ember';

export default Ember.Controller.extend ({
   actions: {
      send: function () {
         document.write('checkbox value: ' + this.get('checkMe'));
      }
   }
});

出力

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

Ember.jsテンプレートチェックボックス

リンクをクリックすると、チェックボックスが表示され、クリックします-

Ember.jsテンプレートチェックボックス

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

Ember.jsテンプレートチェックボックス