在Ember.js中，我把控制器的初始化代码放在哪里?

In Ember.js Where do I put initialization code for a controller, tried routes setup controller

本文关键字：初始化 代码 在哪里 控制器 js Ember      更新时间：2023-09-26

我一直在使用ember.js和highcharts。我发现了一些例子，但例子的简单性并没有让我理解我应该在哪里设置图表对象并渲染它们。

我已经看过了初始化式。我理解路由的作用(我认为)，以及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的模型，但无法通过此问题。

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

更详细:

当与DOM元素和/或视图模板(例如$('#graph1'))交互时，你应该利用视图层。你从路由中调用一个控制器方法，控制器试图瞄准视图模板中的某些东西，但视图在控制器之后出现，模板在视图创建后呈现。

具体来说，你应该利用Ember.run循环的Em.View事件didInsertElement或afterRender钩子来处理你的模板，比如瞄准一个选择器。例外是手柄绑定，它会自动更新。

例如:

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');
});

在这种情况下，当你绑定可能会改变的数据时，我实际上会使用一个图形组件并像这样绑定内容:

{{render-graph content=someArrayOfData}}

经验法则:使用路由从存储中获取数据并将其设置为控制器的属性(默认情况下，路由的模型被设置为控制器的content属性)。使用视图与模板交互并呈现childViews，等等。最后，使用控制器作为中间所有操作的主力(例如，属性、保存等)。

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

相关文章：