マトリックスを表示し、セルをクリックして詳細情報を表示できる 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
content
編集:
「どのようにDataController.content
設定されているか」という質問に答えるために、質問を更新して、 と のより正確な描写を示しましDataRoute
た
DataController
。基本的にDataController
、AJAX 要求に関連する情報を含むモデルがあります。loadData
モデルを観察して をロードする関数 がありますcontent
。