3

基本的なセットアップは次のとおりです。

  1. 単純な計算プロパティを使用して、ember データ モデルの配列をハンドルバー テンプレートにバインドします。
  2. xhr 経由でモデルを取得する前に、いくつかの構成に基づいていくつかのモデルを先頭に追加します
  3. xhr が解決されたら、構成モデルのいずれかを、ワイヤを介して戻ってくるオブジェクトに置き換える必要があります
  4. 計算されたプロパティには 2 つの項目しかないことがメモリ内で確認できるため、これは機能しているように見えますが、ハンドルバー テンプレートには 3 つが表示されているようです (xhr が返された後に配列から実際に切り取られた構成モデルの 1 つ)。

上記の # を次のように確認しました

a.）私が求めたクロム開発ツールで

App.Day.find(1).get('listings').get('length'); //xhr の後に 2 を返します

b.) また、次のことを行いました

App.Appointment.all().get('長さ'); //xhr の後に 2 を返します

**ここにコードがあります**

次のハンドルバー テンプレートがあります (2 つではなく 3 つのアイテムが表示されます)

{{#each appointment in day.listings}}
  {{appointment.start}}<br />
{{/each}}

私の日モデルのリスティング計算プロパティは次のようになります

App.Day = DS.Model.extend({
      name: DS.attr('string'),
      appointments: function() {
          return App.Appointment.find();
      }.property(),
      listings: function() {
          //pretend we need to add some values in memory before we fire the xhr ...
          App.Appointment.add({name: 'first'});

          return this.get('appointments');                                     
      }.property().volatile()
  });

アポイントメント モデルは ember-data モデルですが、メモリ内のアイテムをオンザフライで置き換える必要があるため、find メソッドをオーバーライドします (そして、独自の add メソッドでスタブして、配列をより適切に制御します)。

  App.Appointment = DS.Model.extend({
      name: DS.attr('string')
  }).reopenClass({
      records: [],                                                             
      find: function() {
          var self = this;
          self.records.clear();
          $.getJSON('/api/appointments/', function(response) {
              for(var i = 0; i < response.length; i++) {
                  for(var j = 0; j < self.records.get('length'); j++) {
                      if (self.records[j].get('name') === response[i].name) {
                          //now that our xhr has finished we need to replace any that already exist
                          self.records.splice(j, 1);
                      }
                  }
              }
          });
          return this.records;
      },
      all: function() {
          return this.records;
      },
      add: function(record) {
          this.records.addObject(App.Appointment.createRecord(record));
      }
  });
4

1 に答える 1

3

古い回答は削除されました。基地から離れていた。

spliceKVO に準拠していません。replace代わりに使用する ember 準拠の方法です。replaceCollectionView は、追加および削除するビューを知るために、によってサポートされている配列変更オブザーバーに依存しています。

これが問題でなければ、帽子を食べます。

于 2013-03-22T21:52:19.293 に答える