Access properties from application controller in a rendered template - layout

Question

I have these properties set on my application controller
monthToParse: null,
yearToParse: null,
fullDateToParse: function() {
// set array to month names
var monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
// set a variable to a new date object
var date = new Date();
// set the month to the previous month and return that
date.setMonth(date.getMonth() - 1);
// set the controller properties for use in other parts of the app
this.set('monthToParse', monthNames[date.getMonth()]);
this.set('yearToParse', date.getFullYear());
return this.get('monthToParse') + ' ' + this.get('yearToParse');
}.property('monthToParse', 'yearToParse'),
And they work in my application.hbs.
But I also need to access them in my rendered views layout file.
In index.hbs I'm rendering a bunch of pages like this...
{{render "page-01"}}
{{render "page-02"}}
{{render "page-03"}}
...
and each has a view file that tells it to use a pages layout file like this
import Ember from 'ember';
export default Ember.View.extend({
layoutName: 'page'
});
But in each page.hbs file when I try to reference the applications properties using this technique
In the page controller file
import Ember from 'ember';
export default Ember.Controller.extend({
needs: 'application'
});
In the page.hbs handlebars file
<p>{{controllers.application.fullDateToParse}}</p>
My first thought is that maybe the page.hbs layout file that these pages are using is not properly connected to the controller? Or maybe the nested layout and the way I'm rendering it is off.

Answer 1

I believe by calling {{render 'page-01'}}, you're telling Ember to render the page-01 template with a page-01 controller. You could use the Ember inspector to find out.
You might be able to fix this somehow, but a better solution would be to make your pages into components, and pass in their dependencies explicitly:
{{x-page fullDate=fullDateToParse}}
Then, in your x-page components template, you can just use
{{fullDate}}
Note, depending on what page actually is in your app, there may be a better name for the component than x-page