Emberjs-temp-handlebarbasics

EmberJS-ハンドルバーの基本

Handlebarsテンプレートライブラリは、静的なHTMLと動的なコンテンツを含めることにより、リッチなユーザーインターフェイスを構築できます。これらは、二重中括弧-\ {\ {}}で指定できます。

構文

Ember.Controller.extend ({
   property1: value,
   property2: value,
   .....
   propertyn: valuen,
});

例

次の例は、アプリケーションコントローラーからプロパティを表示する方法を示しています。 次のコードで_app/templates/_の下に_application.hbs_というテンプレートを作成します-

//displaying the values of firstSentence and lastSentence
Hello, <strong>{{firstSentence}} {{lastSentence}}</strong>!

次に、同じ名前（テンプレートファイル）でコントローラーを作成して、プロパティを追加します。 _application.js_ファイルは、次のコードで_app/controller/_の下に作成されます-

import Ember from 'ember';

export default Ember.Controller.extend ({
  //initializing values
   firstSentence: 'Welcome to',
   lastSentence: 'finddevguides!'
});

出力

エンバーサーバーを実行すると、次の出力が表示されます-

Ember.jsテンプレートハンドルバーの基本

_Helpers_の詳細な概念については、リンク：/emberjs/temp_write_helpers [ヘルパーの作成]の章を参照してください。