Ember.js Router v2 dynamic slug

Question

In the following example, using the new Router v2 API, the ember application behaves as expected with one exception. When hovering over the dynamically created links, using a registered #linkTo Handlebars the url shows undefined.

How do I have a slug field in the URL?

Here is the model

App.Todo = DS.Model.extend({
  slug: DS.attr('string'),
  date: DS.attr('date'),
  updated: DS.attr('date'),
  task: DS.attr('string'),
  description: DS.attr('string')
});

My Router

App.Router.map(function(match){
  this.route('index', {path: '/'});
  this.resource('todos', {path: '/todos'}, function(){
    this.resource('create', {path: '/create'});
    this.resource('todo', {path: '/:slug'}, function(){
      this.resource('edit', {path: 'edit'});
    });
  });
});

I know that this does show 'undefined', but this would be a nice (Handlebars)

{{#each todo in tasks}}
  <div class="user">
    {{#linkTo todo todo.slug}}<h4><i class="icon-list"></i>{{todo.task}}</h4>{{/linkTo}}
     <p>{{todo.description}}</p>
  </div>
{{/each}}

Thanks for any pointers! I'm using Ember-data also

Here is a example fiddle http://jsfiddle.net/R2SPs/6/

iamjstates iamjstates · Accepted Answer · 2013-01-18T02:46:47

This works for ember routing v2.1 (01.16.13)

Thanks to rakl on #emberjs on IRC here is a mixin that solves the problem

   App.SlugRouter = Ember.Mixin.create({
        serialize: function(model, params) {
            var name, object;
            object = {};
            name = params[0];
            object[name] = model.get('slug');
            return object;
        }
    });

Now just place that in your Router and your golden

App.TodoRoute = Ember.Route.extend(App.SlugRouter,{
    //insert your code
});

Ember.js Router v2 dynamic slug

2 Answers