Ember.js - 如何将视图绑定到路由器创建的控制器实例

Question

我正在使用最新版本的 Ember.js。我有一个使用 flot.js 显示条形图的 Ember 应用程序。视图绑定到单例对象控制器以动态更新图表。我在这里有一个简单的 jsbin 演示：http://jsbin.com/edosaf/2/edit。请注意，此演示创建 cardController 对象而不是扩展它。以下是相关代码：

App.cardController = Ember.ObjectController.create({
  id: 1,
  name: 'Visa',
  chartData: [ [2011, 450], [2012, 550], [2013, 320] ]
});

App.ApplicationView = Ember.View.extend({
    templateName: 'application',
    chartValuesBinding: 'App.cardController.chartData'
});

我需要更改上面的代码来扩展 cardController 而不是创建它，同时仍将它绑定到视图。

我想根据传入 url 的 card_id 使用不同的条形图数据来扩展这个演示。路由看起来像 #/card/:card_id。我对如何将我的 ChartView 绑定到我的 Card ObjectController 的不同实例感到困惑。我的想法是有一个 Cards ArrayController 来管理所有的信用卡对象。然后有一个 Card ObjectController 用于管理将绑定到 ArrayController 和 ChartView 的活动卡片。

绑定： Cards ArrayController => Card ObjectController => 图表视图

我创建了另一个 jsbin 来尝试实现所需的路由和 Cards ArrayController（应用程序不工作）：http://jsbin.com/edosaf/4/edit

如何将视图绑定到由 ember 路由器创建的控制器实例？对于这个示例，您建议如何构建 ember 应用程序以使用路由 #/card/:card_id 将 CardController 对象绑定到 ChartView？

Answer 1

如何将视图绑定到由 ember 路由器创建的控制器实例？

通常，您的每个视图都有一个匹配的控制器单例。例如，在ApplicationView 中，您可以通过controller 属性访问单例ApplicationController。

当您需要从视图中访问其他内容时，应该通过它的控制器来完成。然后使用needs数组连接控制器。

ApplicationController = Ember.Controller.extend({
  needs: ['card']
});

ApplicationView = Ember.View.extend({
  chartValuesBinding: 'controllers.card.chartData'      
});