Ember ArrayController this.get doesn't work

Question

I'm having hard time to understand arrayController and ObjectController in Ember (at least I think this is the point.) I'm working with an ArrayController and I need to get a model and modify it. (take today model and make in order to figured out how many days are in a month) but every time I do:

this.get("today")

nothing happen. Which from the documentation, that is how it should be call.

If I look at other example, most of the people use ObjectController, so i try it with that one too but I got an error complaining the #each loop i'm using need an ArrayController

Here is my code so far:

//Router

WebCalendar.Router.map(function() {
    this.resource('index', {path: '/'}, function() {
        this.resource("cal", {path: '/'});
        this.resource("location", {path: '/location'});
        this.resource("organization", {path: '/organization'});
    });
});

WebCalendar.CalRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('dates');
    }
});

//Model

WebCalendar.Dates = DS.Model.extend({
    today: DS.attr('date'),
    month: DS.attr('date'),
    year: DS.attr('date'),
    daysName: DS.attr('array'),
    daysInMonth: DS.attr('array')
});


WebCalendar.Dates.FIXTURES = [
    {   
        id: 1,
        today: moment().format('MMMM Do YYYY, h:mm:ss a'), 
        month: moment().format('MMM'),
        year: moment().format('YYYY'),
        daysName: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        daysInMonth: [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ]
    }
];

//CalController

WebCalendar.CalController = Ember.ArrayController.extend({
    getMonthDays: function(){
        return this.get("today");
    }.property('today')

});

//Cal Handlebars

<table>
    {{#each date in controller}}
    <tbody id="table">
        <tr id="year">
            <td>{{date.year}}</td>
        </tr>
        <tr>
            <td id="prev-month"> Prev </td>
            <td id="month">{{date.month}}</td>
            <td id="next-month"> Next </td>
        </tr>

        <tr id="days-of-week">
            {{#each date.daysName}}
                <td>{{this}}</td>
            {{/each}}
        </tr class="days">
        <tr>{{getMonthDays}}</tr>
    </tbody>
    {{/each}}
</table>

My questions are:

Why this.get method doesn't work? Documentation here: http://emberjs.com/api/classes/Ember.ArrayController.html#method_get
Is it correct that i'm using ArrayController in this specific situation?
Why seems i cannot use #each loop with ObjectController?

Can we see the route including model and setupController hooks? — user663031
Yes, just added. I'm not using setupController instead store.find() — Giorgia Sambrotta

Unknown Unknown · Accepted Answer · 2014-10-14T10:45:20

{{getMonthDays}} is being invoked within the {{each}}, which means it is being called in the context of individual Dates objects, but you are defining it on the ArrayController--where Ember won't even look. You are confused between the ArrayController managing the collection of model instances, and individual model instances (or controllers therefor, which you haven't defined).

You need an itemController. I refer you to the documentation rather than summarizing it here. getMonthDays would be a method on the item controller.

By the way,

getMonthDays: function(){
    return this.get("today");
}.property('today')

is often better written as

getMonthDays: Ember.computed.alias('today')

or

getMonthDaysBinding: 'today'

Ember ArrayController this.get doesn't work

1 Answers