Ember Object, with a nested array - ember.js

Question

To learn Ember, I've been trying to make a simple app that computes timezones.
When a person enters their city, and the other person's city, I make a GET request to my API, which returns the dates like so --
great_times: [array]
good_for_me: [array]
good_for_them: [array]
In handlebars, I have
<div class="container">
<div class="col-md-6 col-md-offset-3">
<header>
<h2>We found <span class="twenty-four-header">{{totalTimes}}</span>
great meeting {{pluralize totalTimes 'time' 'times'}} for you!</h2>
</header>
<div class="main-content">
<div class="row">
<div class="col-md-6">
<div class="form-group">
{{view RightTime.AutoCompleteAddressView value=myCity placeholder="What's your city?"
class="form-control input-lg" latLng=myLatLng}}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
{{view RightTime.AutoCompleteAddressView value=theirCity placeholder="What their city?"
class="form-control input-lg" latLng=theirLatLng}}
</div>
</div>
</div>
{{#each meetingTime in greatTimes}}
{{render 'meetingTime' meetingTime }}
{{/each}}
</div><!--main-content-->
</div>
</div>
This works, but what happens is that when I update the city, It no longer updates this each loop.
I do know however that the model was updated, because the {{totalTimes}} computed property does update.
This is what my meeting Object looks like:
RightTime.Meeting = Ember.Object.extend({
meetingTimes: null,
myCity: null,
theirCity: null,
myLatLng: null,
theirLatLng: null,
totalTimes: function() {
if (this.meetingTimes) {
return this.meetingTimes.great_times.length;
}
}.property('meetingTimes'),
locationsData: function() {
return {
myLatLng: [this.myLatLng.k, this.myLatLng.A],
theirLatLng: [this.theirLatLng.k, this.theirLatLng.A]
}
}.property('myLatLng', 'theirLatLng'),
findTimes: function() {
var meeting = this;
if (this.myLatLng && this.theirLatLng) {
$.ajax({
url: 'api/meetings',
type: 'GET',
data: meeting.get('locationsData')
}).done(function(response){
meeting.set('meetingTimes', Ember.A(response));
});
}
}.property('myLatLng', 'theirLatLng')
});
I have a feeling that the problem lies in
.done(function(response){
meeting.set('meetingTimes', Ember.A(response));
});
I'm resetting the whole meetingtimes array, which may be the wrong way to go about it.
How would you go about making the meetingTimes arrray update and reflect in handlebars?

Answer 1

I'd probably just move great_times into a computed property that depends on meetingTimes and isn't chained.
something like
greatTimes: function() {
return Em.get(this, 'meetingTimes.great_times') || [];
}.property('meetingTimes'),
With a template like this
{{#each meetingTime in greatTimes}}
{{render 'meetingTime' meetingTime }}
{{/each}}