javascript - Ember - 处理路由 : task. 时出错编辑断言失败:您不能将 `undefined` 作为 id 传递给商店的查找方法

Question

我正在使用 Ember.js 和 RoR(Rails 4.0.3 和 Ruby 2.0)开发应用程序。

Ember 版本:

DEBUG: Ember      : 1.12.1                 ember.js?body=1:4875 
DEBUG: Ember Data : 1.0.0-beta.19.2        ember.js?body=1:4875 
DEBUG: jQuery     : 1.11.1                 ember.js?body=1:4875

Handlebars v3.0.3

我使用了这个教程

http://www.thesoftwaresimpleton.com/blog/2015/04/18/arraycomputed-refactor/

实现一些自定义组件，但不需要显示它们，它们与主要问题无关。

---

当我想从 ListsRou​​te 转到 TaskEditRoute 时，它抛出一个错误

Error while processing route: task.edit Assertion Failed: 
  You may not pass `undefined` as id to the store's find method
  Error: Assertion Failed: You may not pass `undefined` as id to the store's find method

-router.js

EmTasks.Router.map(function(){
  this.route("lists", {
    path: '/'
  });

  this.route('profile', {
    path: '/profile'
  });

  this.resource("task", {path: "/task/:task_id"}, function () {
      this.route('edit', {path: "edit"});
  });
});

-lists_route.js

EmTasks.ListsRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('list');
  },

  actions: {
      addList: function(param) {
          this.store.createRecord('list', {
              name: $("#list_name").val()
          }).save();
          $("#list_name").val('');
      }
  }
});

-task_edit_route.js

EmTasks.TaskEditRoute = Ember.Route.extend({
    model: function (params) {
        var url = this.get('router.url');
        var id = url.split("/")[2]

        console.log("TaskEditRoute params:", params);

        return this.store.find("task", id);
    }
});

-lists.handlebars

<div class="row">
  {{#each model as |list|}}
    <div class="col-md-4">
        {{x-list list=list}}     <!-- custom component - working -->

        {{x-add-task list=list}} <!-- custom component - working -->

        {{#each list.tasks as |task|}}

            {{#link-to 'task.edit' task}}
                {{task.name}}
            {{/link-to}}

            <a href='#/task/{{task.id}}/edit'>
                {{task.name}}
            </a>

            {{x-task task=task}} <!-- custom component - working -->
        {{/each}}
    </div>
  {{/each}}
</div>

---

所以当我点击由link-to生成的链接时，

{{#link-to 'task.edit' task}}
  {{task.name}}
{{/link-to}}

它不会将我重定向到新的 URL，当我使用 console.log 检查参数时，我可以看到它们是空的。

 TaskEditRoute: params Object {}

此外我得到这个错误:

Error while processing route: task.edit Assertion Failed: You may not pass `undefined` as id to the store's find method Error: Assertion Failed: You may not pass `undefined` as id to the store's find method

当我点击自定义的手写链接时

 <a href='#/task/{{task.id}}/edit'>
   {{task.name}}
 </a>

我被重定向了，但是 TaskEditRoute 中的 params 仍然是空的。

但我可以获取当前 url(window.location.href 或 ember 方式 this.get('router.url'))，解析并获取身份证。

所以它有效……但它很棘手，很老套。

为什么...标准的做事方式，描述here不起作用？

Answer 1

您在 task 路由上定义了动态段 id，而不是 task.edit 路由。

EmTasks.TaskRoute = Ember.Route.extend({
    model: function (params) {
        console.log("TaskEditRoute params:", params);

        return this.store.find("task", params.id);
    }
});

从 Ember 1.4 或其他版本开始，子路由将自动使用其父模型，除非子路由选择在其自己的模型 Hook 中使用不同的东西。因此，您应该拥有父模型，而无需在 TaskEditRoute

中执行任何操作