Emberjs-comp-passproperties

コンポーネントにプロパティを渡す

コンポーネントは、テンプレートスコープ内のプロパティに直接アクセスしません。 したがって、コンポーネントの減速時にプロパティを宣言するだけです（例：\ {\ {component-name title = title}}）。 外部テンプレートスコープの_title_プロパティは、コンポーネントのテンプレート内で使用できます。

構文

{{post-action title=title}}

上記のコードでは、「事後アクション」コンポーネントには「title」プロパティがあり、プロパティ名（「title」）と同じ名前で初期化されます。

例

以下の例では、プロパティをコンポーネントに渡す方法について説明します。ポストアクションとして名前を持つルートを作成し、router.jsファイルを開いてURLマッピングを定義します-

import Ember from 'ember';
//Access to Ember.js library as variable Ember
import config from './config/environment';
//It provides access to app's configuration data as variable config

//The const declares read only variable
const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('post-action');
});

//It specifies Router variable available to other parts of the app
export default Router;

今、次のコードでコンポーネントテンプレートファイル_post-action.hbs_を開きます-

<p>Enter your data: {{input type = "text" value = title}}</p>
<p>The details of the object passed are : {{title}}</p>
{{yield}}

_index.hbs_ファイルを開き、次のコードを追加します-

{{post-action title=title}}
{{outlet}}

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

import Ember from 'ember';

export default Ember.Route.extend ({
   model: function() {
     //assigning the default value for 'title' property
      return {
         title: ""
      };
   }
});

出力

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

Ember.jsコンポーネント受け渡しプロパティ