Ember.js 嵌套视图中的Ember.alias

我试图创建一个可重用的生成元素，它可以对外部数据的变化做出反应。我在包含的视图中使用computed.alias执行此操作，但这可能是错误的方法，因为我似乎根本无法访问通用控制器对象

还有HTML

  <script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
    <h2>Awesome chart</h2>
    {{view App.ChartView width=400 height=100}}
  </script>

欢迎来到Ember.js
{{outlet}}
很棒的图表
{{view App.ChartView width=400 height=100}

值得一提的是，这个组件似乎也不起作用。ApplicationController是否是将在多个页面上使用的代码的唯一位置？“需求”似乎有效，但嵌套视图无法访问它。如果我制作了一个合适的Ember.Controller实例来装饰视图，这似乎也不起作用

非常感谢您的帮助

更新：

我无法编辑下面的评论，但我找到了一个很好的答案，即如何在一条路线中使用相关和不相关的模型

---

首先，您的控制器应该扩展

对象控制器

/

阵列控制器

/

控制器

App.AwesomeChartController = Ember.Controller.extend({...});

content: Ember.computed.alias('controller.data')

第二，除非明确定义，否则创建视图时，视图将采用父视图的控制器

{{view App.ChartView width=400 height=100 controller=controllers.awesomeChart}}

第三，您已经设置了需求（需要一个小的调整），但作为阅读本文的人的提醒，为了从控制器访问不同的控制器，您需要在该控制器的

needs

属性中指定控制器名称

App.IndexController = Ember.Controller.extend({
  needs: ['awesomeChart']
});

第四，从视图内部，您的计算别名更改为

controller.data

。在视图中，它不再知道它是

AwesomeChart

，就像

controller

App.AwesomeChartController = Ember.Controller.extend({...});

content: Ember.computed.alias('controller.data')

第五，在（'init'）方法上的

中，您需要在尝试显示内容之前实际
获取（'content'）
<代码>内容

不在该方法的范围内

var content = this.get('content'); 

---

首先，

AwesomeChart

听起来像是一个可重用的独立组件。在这种情况下，您应该更好地使用

Ember.Component

而不是

Ember.View

（作为奖励，您会得到一个很好的助手：

{{{awesome chart}}

）

其次，

AwesomeChart

要真正可重用，它不应该关心获取数据或任何东西。相反，它应该假设它显式地获取数据

要做到这一点，您基本上需要从awesome图表组件中删除“content:”行，然后在模板中传递数据：

{{awesome-chart content=controllers.awesomeChart.data}}

现在，它比以前更加可重用

但为什么要到此为止？有一个单独的控制器来提取图表数据是很奇怪的。这属于以下型号：

App.ChartData = Ember.Object.extend();
App.ChartData.reopenClass({
  fetch: function() {
    return new Ember.RSVP.Promise(function(resolve) {
      resolve([
        {
          id: 1,
          complete: 50,
          total: 100
        },
        {
          id: 2,
          complete: 70,
          total: 200
        }
      ]);
      // or, in case of http request:
      $.ajax({
        url: 'someURL',
        success: function(data) { resolve(data); }
      });
    });
  }
});

将模型与控制器连接属于以下路径：

App.IndexController = Ember.ObjectController.extend();

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.ChartData.fetch();
  }
});

最后，以这种方式渲染：

{{awesome-chart content=model}}

---

太好了，谢谢。我是否也应该假设init方法需要这个？对于这是否是包含共享、状态感知元素的正确余烬惯用方法，您有什么看法？顺便说一句，needs['awesome_chart']似乎仍然有效（视图属性也相应地进行了调整），但这种命名约定很快就会被弃用吗？我被告知它是camelCase，所以我从未尝试过其他方法。如果有效，就没有损失

this.\u super（）

仅当您覆盖了一个余烬方法时才需要调用，但您没有这样做，你只是有一个在init上触发的方法。我不确定我是否有足够的信息/用例来对这是否是最好的方法提出有效的意见。感谢你的回答和解决重用问题。但是，我想将这个特定的数据映射排除在路由模型之外，因为路由将拥有来自不同模型的自己的数据。毕竟，这个组件可以在应用程序中的任何地方使用，而不仅仅是在索引路由上。您是否了解如何正确处理这种情况，例如，仪表板中的每条路线都有多个模型？