Emberjs-tmp-devp-hlpr-log

提供:Dev Guides
移動先:案内検索

テンプレート開発ヘルパーログ

_ \ {\ {log}} _ヘルパーを使用して、ブラウザーのコンソールのコンテキストで出力変数を表示できます。 このヘルパーを使用すると、文字列や数値などのプリミティブ型を受け取ることもできます。

構文

{{log 'Statment' VarName}}

以下に示す例は、ブラウザのコンソールに出力をレンダリングする方法を示しています。 _post-action_という名前のコンポーネントを作成し、それに次のコードを追加します-

import Ember from 'ember';

export default Ember.Component.extend ({
   actions: {
      send() {
         this.toggleProperty('isShowingBody');
      }
   }
});

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

<h2>Log Helper</h2>
{{#if isShowingBody}}
   {{log 'Name is:' firstName}}
{{/if}}

{{input type = "text" placeholder = "Enter the text"
   value = firstName disabled = entryNotAllowed}}
<button {{action "send"}}>Submit</button>
{{yield}}

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

{{post-action}}
{{outlet}}

出力

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

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

次に、入力ボックスにテキストを入力し、送信ボタンをクリックします-

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

次に、以下のスクリーンショットに示すように、ブラウザのコンソールに結果が表示されます-

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