【问题标题】:Ember direct route dont loads contentEmber 直接路由不加载内容
【发布时间】:2013-07-29 21:33:31
【问题描述】:

我有这条路线

this.resource('todos', { path: '/todos' }, function() {
  this.route('todo', { path: '/todo/:todo_id' });
  this.route('new', {path: '/todo/new'});
});

这是路由 todo 的控制器

App.TodoRoute = Ember.Route.extend({
  model: function(params) {
    return Todo.find(params.todo_id);
  }
});

当我直接去加载/todos,然后选择一个todo按预期加载,但是当我尝试直接加载一个todo/todo/idOfTheTodoHere时,没有加载。

我必须在控制器中添加一些东西,直到找到所有数据才能加载模板?

我会把完整的路线放在这里

App.Router.map(function() {
  this.resource('app', { path: '/' }, function () {
    this.route("about");

    this.resource('todos', { path: '/todos' }, function() {
      this.route('todo', { path: '/todo/:todo_id' });
      this.route('new', {path: '/todo/new'});
    });
  });
});

//This works and finds All todos
App.TodosRoute = Ember.Route.extend({
  model: function () {
    return App.Todo.find();
  }
});

App.TodosNewRoute = Ember.Route.extend({
  model: function () {
    return App.Todo.create;
  }
});

App.TodosTodoRoute = Ember.Route.extend({
  model: function(params) {
    console.log(App.Todo.find();
    return Todo.find(params.todo_id);
  }
});

现在,当我转到 /#/routes 时,所有待办事项都正确显示,我可以创建一个新的,但是当我单击单个待办事项进行显示时,路线更改为 /#/todos/todo/ID ,如果我重新加载浏览器,模板什么也不显示,看起来直接在路由上加载模型什么也不返回。找到的唯一参数是 id,其他属性为空。

如果我有这个属性,那么在模板 todo 中

{{id}} - {{title}}

仅显示 id,如果我检查控制台

 model: function(params) {
    console.log(App.Todo.find();

返回模型id,其他值未定义

【问题讨论】:

  • 忘了说我使用了一个 ember 适配器,我认为这里的错误是适配器没有执行 findOne 查询?

标签: javascript ember.js ember-data


【解决方案1】:

不确定是否是这样,但也许您的意思是导航到 #/todos/todo/SOME_ID 而不是 #/todo/SOME_ID - 当您映射它时为 todo 路线提供的路径 (this.route('todo' {path: 'todo/:todo_id'});) 得到 附加 到父路径 (/todos) 所以你最终得到todos/todo/:todo_id

除此之外,您还可以执行一些调试步骤来进一步隔离问题

  1. 你的路由的 model 钩子是否被调用了?
  2. params.todo_id 是您所期望的吗?
  3. 浏览器是否发出了正确的 ajax 请求? (到正确的端点)
  4. 您的服务器是否正确响应了该 ajax 请求?

编辑

我认为您的意思是在 TodosTodoRoute 的模型挂钩中调用 App.Todo.find:

App.TodosTodoRoute = Ember.Route.extend({
    model: function(params) {
      console.log(App.Todo.find();
      return Todo.find(params.todo_id);   // --- should be App.Todo.Find
  }
});

您发布的代码中也存在一些语法错误——您能否发布一个重复问题的 JSBin 或 JSFiddle 示例?

您是否确认 App.Todo.find(some_id) 向正确的服务器端点发出请求?您的服务器是否提供了正确的响应?

【讨论】:

  • 当我转到#/todos 时,所有的待办事项都在那里,所以模型和控制器工作。但是当我将 #/todos/todo/SOME_ID 复制粘贴到其他选项卡时,或者当我在 #/todos/todo/SOME_ID 上时重新加载浏览器时什么都不呈现。
  • 我觉得这不叫 App.TodosTodoRoute = Ember.Route.extend({ model: function(params) { console.log(App.Todo.find(params.todo_id)); return App .Todo.find(params.todo_id); } });
  • 对,应该叫TodosTodoRoute(Todos是资源,Todo是路由)。那解决了吗?你有没有看到find(params.todo_id) is getting called?
  • 我修改了路由,现在调用了params,但所有值都返回null
  • 你的意思是“对所有值返回 null” - 你的意思是 params 是一个空对象吗?还是 Todo.find(params.todo_id) 返回 null?在第一种情况下,您能否发布您的路由器 + 路由的完整源代码?如果 id 没有被序列化,这似乎是一个非常简单的路由问题。