假设我想创建一个显示矩阵并允许您单击单元格以获取更多信息的 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
路线时,我应该可以访问
DataController
's content
。但是,我得到的只是默认的空数组。我究竟做错了什么?
编辑:
为了回答“如何DataController.content
设置”的问题,我更新了问题以更准确地描述DataRoute
和
DataController
。基本上,DataController
有一个模型,其中包含与 AJAX 请求相关的信息。我有一个函数,loadData
它观察模型并加载content
。