EmberJS:在子路由中使用来自父资源的AJAX数据

时间:2013-06-04 16:43:43

标签: ember.js

假设我想创建一个显示矩阵并允许的余烬应用程序 您可以单击单元格以获取更多信息。我的路线看起来像这样:

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路线时,我应该有权访问 DataController的{​​{1}}。但是,我得到的只是默认的空数组。 我做错了什么?

修改

要回答'如何设置content这个问题,我更新了 问题是为了更准确地描绘DataController.content和。{ DataRoute。基本上,DataController有一个包含的模型 与AJAX请求相关的信息。我有一个函数DataController, 观察模型并加载loadData

0 个答案:

没有答案