使用余烬序列化程序的SEO路由

Question

Im following the example emberjs guides

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

App.PostsAuthorRoute = Ember.Route.extend({
  model: function(params) {
    return App.Post.find({userName : params.userName});
  },

  serialize:function(model) {
    return { post_userName: model.get('userName')};
  }
});

Then here is the link to

Author {{#linkTo 'posts.author' post }} {{post.userName }} {{/linkTo}}

The fun is when I click on the link I get a routing error

Error while loading route: TypeError {}
Uncaught TypeError: Object [Object Object] has no method 'slice'

But when I reload the page, the full data appears.

How can I solve the routing error, really I don't understand why I get the error and is solved on reload the page

Here is the jsbin of a similar case.

http://jsbin.com/aZIXaYo/31/edit

Answer 1

The problem is with the object you're passing to your link-to . You're doing this :

Author {{#linkTo 'posts.author' post }} {{post.userName }} {{/linkTo}}

which passes, a Post to the author route. Passing a model to link-to causes the model hook on the route to be skipped and the passed model is used instead. When you hit reload, the model hook is executed and the model for PostsAuthor route is set to be a collection of Post objects, and then things work as expected.

To do things The Ember Way (TM), you'd want to have an Author model that was related to your Post model. Then you'd have an AuthorRoute and AuthorController that needs a PostsController . In your link you'd pass post.author , and then use the setupController hook to prime the collection for the PostsController . Something like this:

App.Post = DS.Model.extend({
  author : DS.belongsTo('post'),
  title  : DS.attr('string')
});

App.Author = DS.Model.extend({
  name : DS.attr('string'),
  userName : DS.attr('string')
});

App.AuthorRoute = DS.Route.extend({
  model : function(){ // not called when the author is passed in to #link-to
    return this.store.find('author',{userName : params.post_userName})
  },
  setupController : function(controller,model){
    this._super(controller,model);
    this.controllerFor('posts').set('content', this.store.find('post',{userName : model.userName}))
  }
});

App.AuthorController = Ember.ObjectController.extend({
  needs : ['posts']
});

App.PostsController = Ember.ArrayController.extend({
 sortProperties : ['name']
});

Then the template :

Author {{#linkTo 'posts.author' post.author }} {{post.author.name }} {{/linkTo}}