渲染到现有模板时的 Ember 控制器答案

【问题标题】：Ember Controller when rendering into existing template渲染到现有模板时的 Ember 控制器
【发布时间】：2014-04-11 17:59:52
【问题描述】：

我正在学习 Ember 教程，它运行良好，但我无法完全弄清楚其中的一个方面。

Show Only Completed Todos

Todos.Router.map(function () {
  this.resource('todos', { path: '/' }, function () {  // Index route
    // additional child routes
    this.route('active');       // Implicit this.route("active", { path: "/active" });
    this.route('completed');    // Implicit this.route("completed", { path: "/completed" });
  });
});

...

Todos.TodosCompletedRoute = Ember.Route.extend({
  model: function() {
    return this.store.filter('todo', function(todo) {
      return todo.get('isCompleted');
    });
  },
  renderTemplate: function(controller) {
    this.render('todos/index', {controller: controller});
  }
});

对我来说，我们正在重用现有模板并简单地更改分配的模型，在这种情况下，将其限制为已完成的待办事项列表。

我不明白的是要渲染的{controller: controller} 参数。

根据 Chrome 中的 Ember 检查器，无论有无 {controller: controller} 参数，控制器都是 TodosCompletedController。

如果存在 {controller: controller} 参数，则转到应用程序路由（在我的情况下为 file:///Users/dpwrussell/Checkout/web/ember/TodoMVC/index.html#/，然后单击 Completed 会导致正确的响应，仅显示已完成的待办事项。

如果没有 {controller: controller} 参数，单击“已完成”链接会显示待办事项的完整列表，而不仅仅是已完成的。

最后，如果直接访问 url file:///Users/dpwrussell/Checkout/web/ember/TodoMVC/index.html#/completed，那么无论 {controller: controller} 是否丢失，都会显示正确的仅已完成待办事项列表，但如果您转到“全部”，则使用链接再次完成，它将再次停止工作。

jsbin displaying the problem

jsbin showing how it works if you go directly to completed url

谢谢

【问题讨论】：

标签： javascript ember.js

【解决方案1】：

你可以看看Route的render和renderTemplate方法来更好的理解。如果控制器没有在this.render('todos/index', {controller: controller}) 中指定，那么 Ember 将创建并使用 TodosCompletedController，因为路由是 TodosCompletedRoute。参数 'controller' 不是 TodosController，它是生成的 TodosCompletedController。即使在调用render 时未传递控制器，一切也应该正常工作。这是JSBIN。

【讨论】：

谢谢，但我已经阅读了这些内容，但仍然不太明白。我知道如果未指定控制器，它将使用TodosCompletedController，我的问题是如何使用正确的控制器TodosController。我不明白传入的controller 怎么知道是这样的。
恐怕绝对不是这种情况，也是我一开始对此感到疑惑的原因。在我看来，传入的控制器必须是TodosCompletedController 而不是TodosController。 TodosCompletedController 将是默认值，如果没有 {controller: controller}，应该出现什么。删除 {controller: controller} 会导致已完成和活动的功能不会更新显示的待办事项列表。但是，如果在活动/完成的 url 上刷新页面，则它们会正确显示。
我已经添加了 jsbin。你可以去看看。
您的 jsbin 演示了我刚才描述的行为。如果您点击“活动”（{controller: controller} 仍然存在），那么它只会正确显示未完成的项目，但如果您点击已完成，则它会显示所有 3 个项目，而不仅仅是 1 个已完成的项目。
jsbin 有点奇怪，刷新后可以正常工作。我已经更新了链接。您仍然可以从控制台或 Ember 检查器中查看控制器参数是由 Ember 生成的 TodosCompletedController。