Last Updated: February 25, 2016
·
3.812K
· ram9cc

EmberJS Observing a template field from another controller

Let's start with this basic setup.

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('bakery', {path:'/bakery'}, function() {
    this.resource('goodies',{path:':bakery_name'})
  })
});

App.BakeryRoute = Ember.Route.extend({
  model: function() {
    return {name:'Yummy Land'};
  },
  afterModel: function() {
    this.transitionTo('goodies',this.model().name);
  }
});

App.GoodiesRoute = Ember.Route.extend({
  model: function() {
    return [{name:'Eclair'},{name:'Donut'},{name:'Oatmeal Cookie'}];
  }
});

At this point we have some data and some resources defined.

let's say that our 'bakery' template has a search field in it and
we want to access it from our 'goodies' controller.


  <script type="text/x-handlebars" id="bakery">
At {{#link-to 'goodies' name}}"{{name}}" {{/link-to}}
    <br/>
<!-- here is our search field -->
    {{input type='text' value=searchText}}

    {{outlet}}
  </script>

  <script type="text/x-handlebars" id="goodies">
    You see the following goodies:
    <ul>
    {{#each item in model}}
      <li>{{item.name}}</li>
    {{/each}}
    </ul>
  </script>

Ember provides us a faculty named 'needs' that works like below.

When another controller 'bakery' is referenced according to 'needs' it becomes
accessible via the namespace path 'controllers.bakery' and it's properties internally
become available.

The 'needs' faculty can be used with observes.


App.BakeryController = Ember.ObjectController.extend({
})

App.GoodiesController = Ember.ArrayController.extend({
  needs: "bakery",
  searchFilter: function() {
    Ember.Logger.debug("someone is looking for " + this.get("controllers.bakery.searchText"))
  }.observes("controllers.bakery.searchText")
})