Ember对象,带有嵌套数组

时间:2014-05-04 20:07:19

标签: ember.js

要了解Ember,我一直在尝试制作一个计算时区的简单应用程序。

当一个人进入他们的城市和另一个人的城市时,我向我的API发出GET请求,该API会返回这样的日期 -

great_times: [array]
good_for_me: [array]
good_for_them: [array]

在把手中,我有

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

这样可行,但是当我更新城市时,它不再更新每个循环。

我确实知道模型已更新,因为{{totalTimes}}计算属性确实更新了。

这就是我的会议对象的样子:

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')
});

我感觉问题出在

.done(function(response){
            meeting.set('meetingTimes', Ember.A(response));
          });

我正在重置整个会议时间数组,这可能是错误的方法。

你将如何使meetingTimes arrray更新并反映在把手中?

1 个答案:

答案 0 :(得分:1)

我可能只是将great_times移动到依赖于meetingTimes并且没有链接的计算属性中。

类似

greatTimes: function() {
  return Em.get(this, 'meetingTimes.great_times') || [];
}.property('meetingTimes'),

使用这样的模板

{{#each meetingTime in greatTimes}}
  {{render 'meetingTime' meetingTime }}
{{/each}}