Keyboard navigation within ArrayController

Design
1

I am new to Ember and was really enjoying it until I just got stuck.

I am trying to create an unordered list of models and each list item has some buttons that call actions on the corresponding controller. This is fine.

However, the list of items should have the first item highlighted to begin with, indicating that that item can receive keyboard shortcuts for those buttons. When an action has been taken on that list item, the next thing in the list can be highlighted.

I have tried using a CollectionView extension inspired by Discourse’s search suggestions and setting it’s contentBinding: 'controller' but haven’t got very far. I have set up a basic starting point on jsFiddle and was wondering if anyone could help to point me in the right direction?

Thanks!

2

@bobbyrenwick did you figure this out?

3

I can’t type up a solution right now, but I will if you’re still having an issue. To at least point you down the right direction I would make the Index controller an ArrayController and on my array controller I would have a property called “selected” where I store the current selected index.

On the Index view I would wire up an event for keyPress which sends an event to the controller and passes in a single param that indicated if the keyPress was up or down. The controller action would then look at the selected index property and +/- and do an objectAt and set selected on the arrayController’s itemController.

4

I would love to see the answer to this one as i am trying to do something similar. The difference in my case is i want to use the up and down arrows keys to move up and down the list and display the details of the selected item in another template or maybe even the same template.

@jasonmit Any chance of posting your solution?

5

@seer

Here is a quick example of how you can pull it off.

6

@jasonmit Thanks that was perfect. It is mostly working when i tried to integrate it with my application and i will put the issue in another thread as it has to do with the best way to integrate a xml datasource.

7

@jasonmit I have managed to use your example to build the same thing into my own code but found 2 issues.

  1. If you resize the browser so the content takes more than the room of the screen and so you get scroll bars then the arrow keys will also make the page scroll up and down at the same time as changing the list item value. That is why i did not realise my code was working.

  2. Is it possible to trigger the child template for user at the same time as the selection changes? At the minute content on the same template updates but the template for a user is not updated. In the example you provided you have room for a user template but don’t have an actual user template. If it is not possible that is fine as i can live with it all been in one template but i thought separating it out would be better.

8

I still need to fix the browser scrolling with the arrow keys but i just realised that loading a child template for the current selected item would be bad as it would stuff up the browser history as you move up and down the list. I should be using a Component instead of a template for this shouldn’t I?

9

Ember Latest - JSFiddle - Code Playground Line 80 will prevent the window scrolling as you arrow/down

I’ll discuss the templating concern later today, heading out to work.

10

Hopefully I understood what you were asking. Here is how you can separate the user template into its own view while still being backed by individual controllers Ember Latest - JSFiddle - Code Playground

11

@jasonmit The key fix worked for the arrow keys but the user template was not exactly what i wanted.

In my case this list is a list of names for a collection of objects and these objects have a lot more details on them. I am trying to display all those details on the rest of the screen and they will always be the details of the selected item on the list. Before i did this with a template and a child route. Before that made sense but now i am not so sure it is the correct way. I think it should be a component now but not 100% sure.

http://emberjs.com/guides/components/wrapping-content-in-a-component/ seems like exactly what i want so i played around with it and got exactly what a wanted. A reusable component that displays the details of the selected item.

Thanks so much for the help. Takes time to get your head around everything in Ember but the more i find the more i like it.

12

It sounds to me a lot like a master/detail scenario. Is that correct?

13

yea that is correct.

14

Here is an example of how a details panel might work Ember Latest - JSFiddle - Code Playground

15

Thanks @jasonmit. That is exactly what i was looking at doing originally before i read about components. I have done the same thing with a component in my code partly because i could not work out how to load the view like you just showed me how to do. I can either stay with a component or switch to the view like you just showed me. What is generally considered better for a situation like this? Is it just personal preference or a reason too choose one over the other?

16

I would use a view in this scenario only because of the components are so isolated and it doesn’t seem like a component that you would be reusing outside of this context.

17

Thanks. I will update my POC to use a view then.