CODEWITHSUNDEEP
javascriptruby-on-railsember.jsember-datahandlebars.js
nothing-special-here
nothing-special-here

Reputation: 12578

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

I am developing application in Ember.js and RoR (Rails 4.0.3 and Ruby 2.0).

Ember version:

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

I used this tutorial

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

to implement some custom components, but there is no need to show them, they are irrevelant to main problem.

When I want to to go from ListsRoute to TaskEditRoute it throws me an error

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>

So when I click on the link generated by link-to, 

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

it doesn't redirect me to new URL and when I check params using console.log I can see they are empty.

 TaskEditRoute: params Object {}

Moreover I get this error:

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

When I click on the custom, hand-written link

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

I am redirected, but still the params in TaskEditRoute are empty.

But I can then get current url (either window.location.href OR ember way this.get('router.url')), parse it and fetch ID.

So it works... but it is tricky, hacky.

Why... the standard way of doing things, described here doesnt works?

Upvotes: 1

Views: 1998

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

You have the dynamic segment id defined on the task route, not the task.edit route. 

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

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

As of Ember 1.4 or something child routes will automatically use their parent's model unless the child route chooses to use something different in its own model hook. So you should have the parents model without having to do anything in the TaskEditRoute

Upvotes: 3

Related Questions