Databases
StackOverflow2013
Postsdbo
POEmber.js: How to communicate data between a parent route's controller and a child route?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POEmber.js: How to communicate data between a parent route's controller and a child route?
    text
    copied!<p>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).</p> <p>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.</p> <p>This is the index controller:</p> <pre><code>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'); } }); </code></pre> <p>The WhatDoYouWantToKnow controller "needs" the index controller:</p> <pre><code>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 }); } }); </code></pre> <p>This route has a template which links to the '/what-do-you-want-to-know/tweets' route:</p> <pre><code>&lt;p&gt;Your location:&lt;/p&gt; &lt;div id="map"&gt;&lt;/div&gt; &lt;ul&gt; &lt;li&gt;{{#linkTo 'tweets'}}Tweets{{/linkTo}}&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>I then need to pass these coords onto the child route:</p> <pre><code>App.TweetsRoute = Ember.Route.extend({ model: function() { return App.Tweet.find({coords:}); } }); </code></pre> <p>I'm using Ember Data's Basic Adapter.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload