Ember Object, with a nested array

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?

Kingpin2k · Accepted Answer · 2014-05-04 21:20:22Z

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}}

answered May 4, 2014 at 21:20

Kingpin2k

47.4k10 gold badges80 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Stepan Parunashvili Over a year ago

Hey Kingpin, I added this update, but it still doesn't seem to be working in some cases. When I try Toronto and New York, I get 12. Then, when I change it Toronto to Osaka, I should only get 1, but instead the 1 gets appended to the each loop. you can take a look here-> infinite-caverns-7086.herokuapp.com

Kingpin2k Over a year ago

Would you mind sharing your templates? If I were to guess I'd say there is a problem with your template (like non-matching tags, or invalid html).

Stepan Parunashvili Over a year ago

Hi kingpin, sure, will update the snippet here. The full github for the app is here -- github.com/stopachka/right-time

Stepan Parunashvili Over a year ago

Oh my god, you were right! It was a closing div tag the meetingTime.handlebars template. Mr. Kingpin, big gratitude!

Kingpin2k Over a year ago

Awesome, glad to hear you found it.

Collectives™ on Stack Overflow

Ember Object, with a nested array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related