Templates Views & Controllers data sharing fundamentals

1

I am struggling with a fundamental concept of Ember and I’d be grateful if someone would give me a shove up.

I have an app design that looks a bit like this * cough * I have been trying to build it so that each ‘widget’ is it’s own Template-View-&-Controller. So I tried to build it with an App TV&C, Image TV&C, Buttons TV&C and tow buttons each with a TV&C.

My hope was that I could change the size of the image using the buttons by binding a value on the buttons controller to a value in the Image controller and modify each time a click action is fired from one of the buttons.

Something like this: * cough *

I planned to use the App controller to set this up as there would be other states in the app where neither the image view nor the the buttons would be visible.

So far I’ve only managed to get any of this to work if I use one controller for all sub-views. This feels totally wrong.

How should I do this?

Fundamentally, the buttons are really part of the Image view but due to how layout works they have to be created separately. Is there a way to connect the two views into one?

Alternatively, how can I get hold of the corresponding controller and bind width and height across them?

Is there a better way to do this? Should I be using a router (while I can see that a router might make sense for this example I have other similar examples where a router feels wrong: e.g. a search controller that filters a collection of images where the main image is)? e.g.:

Any help, suggestions would be gratefully received.

2

Have you tried using needs to manage the dependency between controllers?

1 Like
3

I would use nested routes with the link posted just before. You could also try using the control helper, with explicit data binding

4

Just a reminder, {{control}} is hidden behind a flag because it is still experimental. Consider using the new {{component}} helper instead.

5

I actually meant {{render}} which is more stable. However I can’t find the documentation for {{component}}. Do you know where I can find it ?

6

There you go:

Ember Guides: Templates are HTML - Components - Ember Guides

Components API: Component - 4.6 - Ember API Documentation