Question

I have multiple UI components that needs a navigation menu. I am trying to create a MenuItem viewModel that other viewModels can use.

The idea is similar to the Knockout Webmail Example.

For example, a “Window” viewModel can have an array of “MenuItems”. A MenuItem contains all the behavioral functionality (hover & active states).

While hover & active states are pretty standard in my use case, each MenuItem needs to trigger a click handler individually.

It will be ideal if I can attach event callbacks within the MenuItem viewModel so that parent viewModels can handle each menuItem’s click event.

I can define the click handlers in the parent viewModel, but how do I reference each MenuItem’s click handler in a foreach template binding?

I am still experimenting and created an example in jsFiddle. I am really not too happy with the markup right now either as the data-bindings are too verbose.

Thank you in advance.

Answer 1

Try using ko.contextFor(this).

Have a look Ko unobtrusive event handlers