1

マトリックスを表示し、セルをクリックして詳細情報を表示できる ember アプリを作成したいとします。私のルートは次のようになります。

App.Router.map(function() {
  this.resource("data", function() {
    this.route("cell", {path: ':row/:col'});
  });
});

App.DataRoute = Ember.Route.extend({
  model: function(params) {
    return App.DataModel.create({
      /* information needed for AJAX query */
    });
  },
});

App.DataCellRoute = Ember.Route.extend({
  model: function(params) {
    return Ember.Object.create({
      row: params.row,
      col: params.col
    });
  },

  serialize: function(model) {
    return {row: model.row, col: model.col};
  },
});

さらに、マトリックスのロードはコストがかかる (たとえば、遅い AJAX リクエスト) ため、子ルートに移行するときにデータをリロードする必要はありません。また、セル内のデータをシリアル化できないと仮定すると、URL でセル データを渡すことはできません。

コントローラーは次のようになります。

App.DataController = Ember.ArrayController.extend({
  model: null,
  content: Ember.A(),

  loadData: function() {
    self = this;
    $.ajax({
      /* ... */,

      success: function(data) {
        App.beginPropertyChanges();
        self.clear();
        data.forEach(function(row) {
          self.pushObject(row);
        });
        App.endPropertyChanges();
      },
  }.observes('model'),
});

App.DataCellController = Ember.ObjectController.extend({
  needs: 'data',
  model: {row: 0, col: 0},

  matrixBinding: 'controllers.data.content',

  cell: function() {
    var xy = this.get('model');
    return this.get('matrix')[xy.row][xy.col];
  }.property('matrix.@each', 'model'),
});

セルをクリックすると、そのビューは、適切な行/列にDataController遷移するイベントを送信するよう指示します。data.cellルートに移行すると、 のにdata.cellアクセスできるはずだと思ってい ました。ただし、取得できるのはデフォルトの空の配列だけです。私は何を間違っていますか?DataControllercontent

編集

「どのようにDataController.content設定されているか」という質問に答えるために、質問を更新して、 と のより正確な描写を示しましDataRouteDataController。基本的にDataController、AJAX 要求に関連する情報を含むモデルがあります。loadDataモデルを観察して をロードする関数 がありますcontent

4

0 に答える 0