javascript - 在 Ember.js 中，我在哪里放置 Controller 的初始化代码，尝试了路由设置 Controller

Question

我一直在使用 ember.js 和 highcharts。我找到了一些示例，但这些示例的简单性不允许我理解应该在哪里设置图表对象并渲染它们。

我看过初始化程序。我理解路由的作用(我认为)，以及 Route 对象如何维护状态。

我有一个例子，试图将我的初始化代码移动到 Route setupController 函数中。这是一个 JSFiddle http://jsfiddle.net/gregorydickson/as9dZ/

App.IndexRoute = Ember.Route.extend({

  setupController: function(controller, model) {
    //These do not work here?????
    controller.createGraph('graph1', 'line');
    controller.createGraph('graph2', 'column');
   }
 });

我移动代码的地方，它不起作用(您可以注释掉路由器中的两个调用，并在 JavaScript 底部取消注释它们以使其运行)。

我计划建立一个模型，在初始化程序中从服务器检索 json，但无法解决此问题。

Answer 1

问题的根源:您试图在路由模板渲染之前渲染到 DOM。

更详细:

与 DOM 元素和/或 View 模板(例如 $('#graph1'))交互时，您应该使用 View 层。您正在从路由调用 Controller 方法，并且 Controller 尝试定位 View 模板中的某些内容，但 View 出现在 Controller 之后，并且模板是在创建 View 之后呈现的。

具体来说，您应该利用 Em.View 事件 didInsertElement 或 Ember.run 的 afterRender Hook > 在使用模板进行操作(例如定位选择器)时循环。 Handlebars 绑定(bind)是个异常(exception)，它会自动更新。

例如:

App.MyView = Em.View.extend({
  doSomethingWithTheDOM: function() {
    this.$().find('#graph1').setChart();
  }).on('didInsertElement');
});

或者:

App.MyView = Em.View.extend({
  doSomethingWithTheDOM: function() {
    Em.run.scheduleOnce('afterRender', this, function() {
      this.$().find('#graph1').setChart();
    });
  }).on('willInsertElement');
});

在这种情况下，当您绑定(bind)可能会更改的数据时，我实际上会使用图表 component并像这样绑定(bind)内容:

{{render-graph content=someArrayOfData}}

经验法则:使用路由从存储中获取数据并将其设置为 Controller 上的属性(默认情况下，路由的模型设置为 Controller 的内容 属性。使用 View 与模板交互并渲染 subview 等。最后，使用 Controller 作为中间所有内容的主力(例如属性、保存等)。

旁注:当重写像 setupController 这样的核心对象方法时，你应该调用 this._super(controller, model) (或 this ._super()(如果没有参数)，以确保您的 Ember 应用程序执行应有的一切操作。基本上，_super 只是调用如果您没有重写该方法就会运行的函数。