YOSHINO日記

プログラミングに関すること

Ember.js入門13: 別のcontrollerやrouteの値にアクセスする

準備:2つのcontrollerを定義する

こんな感じのルーティングを想定します。

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('foo1', function() {
    this.route('foo2');
  });
});

export default Router

app/routes/foo1.js

import Route from '@ember/routing/route';

export default Route.extend({
  model(){
    return ['abc', 'def', 'ghi'];
  }
});

app/routes/foo2.js

import Route from '@ember/routing/route';

export default Route.extend({
  model(){
    return ['jkl', 'mno', 'pqr'];
  }
})

app/controllers/foo1.js

import Controller from '@ember/controller';

export default Controller.extend({
  prop1: 'foo property'
});

1つのコントローラーから別のcontrollerやrouteにアクセスできるように定義する

foo2からfoo1の値へアクセスできるようにするために以下のように定義します。

app/controllers/foo1/foo2.js

import Controller from '@ember/controller';

export default Controller.extend({
  foo1Controller:Ember.inject.controller('foo1'),
  foo1: Ember.computed.reads('foo1Controller.model')
});

viewで別のコントローラーにアクセスしてみる

app/templates/foo1/foo2.hbs

<h3>Foo2</h3>

{{#each model as |letters|}}
  {{letters}}<br>
{{/each}}

<h3>Here is the model injected in from the foo1 controller</h3>

{{#each foo1 as |letters|}}
  {{letters}}<br>
{{/each}}

<h3>Foo1 Property</h3>

{{foo1Controller.prop1}}


{{outlet}}

こんな感じに表示されます。

Foo1
abc
def
ghi

Foo2
abc
def
ghi

Here is the model injected in from the foo1 controller
abc
def
ghi

Foo1 Property
foo property