Ember.js linking to next item

I’m new to emberjs so after few days messing around I decided to build a image gallery app So far so good.I can load images route them but I cannot make a link to next one

http://emberjs.jsbin.com/hayutoqe/1/edit?html,js

Hi, I’ve updated your jsbin to show one way of doing it.

http://emberjs.jsbin.com/hayutoqe/4

I think the important part to remember is that the model for your post route doesn’t have any knowledge of what is going on with the rest of the application. My edit gives that model the information it needs to know what the “next” item should be.

In this case, I added a nextId property to the post model that is used to link to the next picture in the template. I also updated the template to include the current Id and URL so that you can see it change with each click.

1 Like

Another way you could do it involves setting up a controller for the Post route with a computed property to generate nextId. This saves you from having to encode nextId on your model and can be mirrored to generate links to the previous image as well.

http://emberjs.jsbin.com/hayutoqe/9

And even one more way, similar to @codefox421 but what I think is more the “Ember way”. Although I’m fairly new to Ember so perhaps there is yet a better way. Here is what I have, although I’m having trouble getting the nextPost and previousPost to properly update when navigating between them. I have to get going but maybe someone else can help solve that issue (it would be a learning experience for me too).

http://emberjs.jsbin.com/hayutoqe/14/edit?html,js

Good use of Controller.needs, @Panman8201! It looks like your issue with getting links to update was simply a typo: 'controllers.posts, model' should be 'controllers.posts', 'model'.

http://emberjs.jsbin.com/hayutoqe/15/edit?js,output

The computed properties shouldn’t need to reference 'controllers.posts' afaik.

Great, thanks @codefox421, I knew it had to be something easy like that.

Would it need to reference controllers.posts in case a new Post was injected (modifying the index positions)? Probably unlikely since you’d transition between routes when adding a new Post… But maybe it’s a WebSocket source… Just a thought.

P.S. The missing Post with ID of 3 threw me off for a second…

For the case of a new post being injected, it should subscribe to 'controllers.posts.[]' so that it will update when the array content changes. Otherwise, it will only change when the entire array is replaced.

Example: navigate to post #1 and wait 5 seconds. http://emberjs.jsbin.com/hayutoqe/18/edit?js,output