Render each model's item, one at a time

1

So what would be the best practices to do the following:

Let’s say I have a route like: /quiz/:quiz_id. For this route, I grab a model by calling: this.store.find('quiz', 5); Ok, the model Quiz , has a hasMany relation for qItems, which are quiz items.

This means that, when I go to /quiz/5, I will have the quiz model and its relation items stored in my model. Now, what I want to do is, display each item in model.get('qItems') one at a time.

Meaning, when I go the /quiz/5, I display some info about the main quiz in the template, and then I display, for example, the first qItem 's ID. When the user clicks a Continue button, I iterate to the next qItem, remove the view for the last item, and render the new item again.

The thing is, I want to do this without changing the URL, so without calling a new route. I want to stay on the same /quiz/5 route, and basically iterate over the model’s relation array, rerendering a view, template or component each time the user wants to continue.

Any advice on how I could achieve this. How do I rerender stuff dynamically in the main quiz template, without navigating to a new route? Thank you very much.

2

Ok, I think I’m beginning to understand. The best way would be to create a currentItem, which I render in the page. This currentItem will watch over changes in my array, and as soon as the currentItem changes, the template will rerender the content.

3

Any special reason that you do not want to change the route?

I am assuming that you do not want to save any context while the user steps through the quiz items, e.g. if the user refreshes the page he will return to the first qItem again.

The only way to do this is to load the complete array and use javascript to dynamically show only the current qItem with a link to the next qItem.

Each step will involve hiding the other qItem elements while showing the new qItem element.

Really has nothing to do with Emberjs, but I see no other way to do this.