Ember binding model to template - ember.js

Question

I'm having hard time to understand the different ways to bind models to templates in Ember and when use one or the others.
Following different tutorial my code should work but it doesn't.
cal.hbs
<div class="calendar">
{{#each cal}}
{{#if days_label.length}}
{{days_label.[1]}}
{{/if}}
{{test}}
{{/each}}
</div>
cal_model.js
WebCalendar.Cal = DS.Model.extend({
today: DS.attr('date'),
test: DS.attr('number'),
days_label: DS.attr('array'),
months_label: DS.attr('array'),
days_per_month: DS.attr('array')
});
WebCalendar.Cal.FIXTURES = [{
id: 1,
test: 2,
today: new Date(),
days_label: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
months_label: ['January', 'February', 'March', 'April',
'May', 'June', 'July', 'August', 'September',
'October', 'November', 'December'],
days_per_month: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
}];
Router.js
WebCalendar.CalRoute = Ember.Route.extend({
model: function(){
return this.store.find('cal');
}
});
cal_controller.js
WebCalendar.CalController = Ember.ArrayController.extend({
month: function(){
var today = this.get('test');
return today + 1;
}.property('model'),
monthCal: function(year, month){
var today = this.store.find('cal', { today: new Date() });
this.year = today.getFullYear();
this.month = today.getMonth();
},
updateContent: function() { //doesn't work if is called arrangedContent
return this.get('model').content;
}.property('model')
});
For what I understood there are these ways to hook the model:
First
<div class="calendar">
{{#each cal}}
{{#if days_label.length}}
{{days_label.[1]}}
{{/if}}
{{test}}
{{/each}}
</div>
Second
<div class="calendar">
{{#each cal in controller}}
{{#if days_label.length}}
{{days_label.[1]}}
{{/if}}
{{test}}
{{/each}}
</div>
Third
<div class="calendar">
{{#each item in arrangedContent}} //this work if I don't specify arrangedContent in my controller
{{#if item.days_label.length}}//this doesn't work
{{item.days_label.[1]}}//this doesn't work
{{/if}}
{{item.test}}// this works
{{/each}}
</div>
What I want to understand and I can't find good explanation around is: what's the difference between those ways, when use what and what exactly is and does arrangedContent
Thank you very much for any explanation!

Answer 1

ArrangedContent ,if Im not wrong , is an array generated by
EMBER.SORTABLEMIXIN CLASS that is nowday implemented by default to EMBER.ARRAYPROXY CLASS , so your arraycontrollers inherit the arrangedcontent property.
What it really is , an array that is your controller's content , sorted by the properties you'll define in your controller (sortProperties, sortAscending).
So if I have a controller content(that is an array of objects that have the property name) , I can choose to sort them by the name property (sortProperties: ['name'] , thus rendering them in alphabetical order ascending (sortAscending: true).
The difference between your first and second question, is what is passed inside the loop as the current object.
In first you will call {{days_label}} to get the days_label that is equivalent as saying this.days_label.
In your second example though you can call {{days_label}}, but also call cal.days_label that in both cases is the same but it's needed if you were let's say go deeper inside an iteration, as:
{{#each cal in controller}}
{{#if days_label.length}}
{{#each day in days_label}}
{{day.someProperty}}
{{days_label.someOtherProperty}}
{{/each}}
{{/if}}
{{test}}
{{/each}}
In this example I could just do {{#each controller}} ,inside it {{#each days_label}} and then do {{someProperty}} inside it , but then I wouldn't be able to do the same for {{days_label.someOtherProperty}} because this would have changed.
One more thing to consider (very usefull when you are using ember data), is the difference between the model and the content of the controller.
The content is set inside route's setupController (controller, model) but can be overwritten.
UPDATE
Thank you again for your answer :) Right, the code is bit messy now but what i'm try to achieve now is very simple. With the model that I have, I want to display the current month. I try to take 'today' from my model, in my controller, do today.getMonth() and save as property(month), so i should be able to display in the hbs with {{month}}. – Giorgia Sambrotta
What I would do then is move the logic from the controller inside the model.
Some basic things to understand about ember data is that calling this.store.find('resourceName'), makes a request to your api's resoure index route thus returning an array of objects.
This call will be triggered each time you access this route because ember is agnostic of whereas your records have been changed at your server.
So given that you get an array of objects that all have some sort of date in them and you just want to get their month from it , you can define a computed property inside your WebCalendar.Cal model.
Inside WebCalendar.Cal
month: (function() {
var today = this.get('today');
//do something to get the value you want here
}).property('today')
Another thing to consider is that since months_label, days_label and days_per_month are static arrays you really don't need to pass them in each record but instead move them inside your model too, as properties.
So now that we've moved logic to the model you can just call {{month}} inside itteration and this will give you the result of the model's computed property. Also if a cal record happens to change today you will get that change imediately.
The only reason you wouldn't want to do it this way is if you wouldn't want this month property anywhere else except this specific controller.
In this case you would go
Inside WebCalendar.CalController
setMonthToEachCal: function(){
this.get('content').forEach(function(cal) {
today = cal.get('today');
//prepare the month value here and set it in month var
cal.set('month', month);
});
}.observes('content.#each.today'),