2

I am following Router based application structure based on http://emberjs.com/guides/outlets/.
I am able to follow, and make it work. But Having issue while loading content when page is showing post (e.g. /#/posts/2), I suspect that it is because, that particular Post is not loaded.

What is way out of it? Isn't it suppose to work out of the box.

Fiddle example: http://jsfiddle.net/nachiket/h5Hkm/

App = Ember.Application.create({});

//MODEL
App.Summary = DS.Model.extend({
  content: DS.attr('string')
});
App.Post = DS.Model.extend({
  title: DS.attr('string'),
  summary: DS.hasMany(App.Summary, {embedded: true})
});

App.Post.FIXTURES = [
  {id:1, title: 'My first post', summary: [{id:1, content: 'This is summary1'}]},
  {id:2, title: 'Another post' , summary: [{id:2, content: 'This is summary2'}]},
  {id:3, title: 'Yet another post' , summary: [{id:3, content: 'This is summary3'}]}
];

//STORE
App.store = DS.Store.create({
  revision: 4,
  adapter: DS.fixtureAdapter
});

//ROUTER
App.Router = Ember.Router.extend({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
        route: '/',
        redirectsTo: 'posts'
    }),
    posts: Ember.Route.extend({
        route: '/posts',
        showPost: Ember.Route.transitionTo('post'),
        connectOutlets: function(router){
           router.get('applicationController').
               connectOutlet('posts',App.Post.find());
        }
    }),
    post: Ember.Route.extend({
        route: '/posts/:post_id',
        goBack: Ember.Route.transitionTo('posts'),
        connectOutlets: function(router, post) {
            router.get('applicationController').connectOutlet('post', post);
        }
    })
  })
});

//CONTROLLERS - VIEWS
App.ApplicationController = Ember.Controller.extend({});
App.ApplicationView = Ember.View.extend({
  templateName: 'application'
});

App.PostsController = Ember.ArrayController.extend({
});
App.PostsView = Ember.View.extend({
  templateName: 'posts'
});

App.PostController = Ember.ObjectController.extend({    
});
App.PostView = Ember.View.extend({
  templateName: 'post'
});

App.initialize();

Direct output: http://fiddle.jshell.net/nachiket/h5Hkm/show/light/
Works: http://fiddle.jshell.net/nachiket/h5Hkm/show/light/#/posts
Doesn't Work: http://fiddle.jshell.net/nachiket/h5Hkm/show/light/#/posts/1

sly7_7
  • 11,781
  • 3
  • 36
  • 53
Nachiket
  • 5,421
  • 6
  • 37
  • 47

2 Answers2

2

Ember routing is passing the string "1" instead of the number 1 to the find method to resolve the post. The string "1" doesn't match any fixtures. Changing your fixtures (for test purposes) to have string ids should work.

http://jsfiddle.net/h5Hkm/7/show/light/#/posts/1

jhorman
  • 466
  • 3
  • 5
0

Adding a deserializer to your "post" route should do the trick. I'd recommend reading (at least the "Serializing and Deserializing States" section) http://trek.github.com/.

Let me know if you have trouble getting it to work and I'll create a fiddle.

  • There should not be need of serialize/deserialize as I am using Ember-data, isn't it true? – Nachiket Sep 06 '12 at 17:33
  • I haven't seen any documentation that would indicate that. But I am just starting out with ember.js myself so I could very well be wrong. – ErikMejerHansen Sep 06 '12 at 19:25