Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ember.js: How to communicate data between a parent route's controller and a child route?

I'm building an app where the user's location is found using HTML5 geolocation. Once their location has been retrieved their location is plotted on a map (the parent route). They can then choose to view a list of tweets that were posted around that location (the child route).

So, I need to pass the coordinates I retrieved at the parent route (which are stored on the controller) to the child route so I can query the Twitter API properly. However, I am unsure how to do this or even if I've chosen the best approach.

This is the index controller:

App.IndexController = Ember.ObjectController.extend({

  coords: false,

  getGeoLocation: function() {
    if (navigator.geolocation) {
        this.set('retrieving', true);
        navigator.geolocation.getCurrentPosition(
            this.locationRetrieved.bind(this),
            this.locationFailed.bind(this),
            {
                timeout: 20000
            }
        );
    } else {
        this.set('geolocation', false);
    }
  },

  locationRetrieved: function(position) {
    this.set('coords', position.coords);
    this.get('target').transitionTo('what-do-you-want-to-know');
  }
});

The WhatDoYouWantToKnow controller "needs" the index controller:

App.WhatDoYouWantToKnowController = Ember.ObjectController.extend({

  needs: 'index',

  createMap: function() {
    var coords = this.get('controllers.index').get('coords');
    var pyrmont = new google.maps.LatLng(coords.latitude, coords.longitude);

    var map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: pyrmont,
        zoom: 8
    });

    var marker = new google.maps.Marker({
        map: map,
        position: pyrmont
    });
  }
});

This route has a template which links to the '/what-do-you-want-to-know/tweets' route:

<p>Your location:</p>
<div id="map"></div>
<ul>
  <li>{{#linkTo 'tweets'}}Tweets{{/linkTo}}</li>
</ul>

I then need to pass these coords onto the child route:

App.TweetsRoute = Ember.Route.extend({
   model: function() {
    return App.Tweet.find({coords:});
  }
});

I'm using Ember Data's Basic Adapter.

like image 378
Stephen Young Avatar asked Apr 20 '13 19:04

Stephen Young


1 Answers

It is easy to do that in a route. In route you have access to all controllers. Just use method controllerFor like this:

App.TweetsRoute = Ember.Route.extend({
    model: function () {
        var coords = this.controllerFor('index').get('coords');
        return App.Tweet.find({ coords: coords });
    }
});
like image 114
Myslik Avatar answered Nov 01 '22 08:11

Myslik