Architecture for deep nested models in Ember JS

Question

I have a question about Ember.js. I'm working on a drag and drop system for the content of a CMS and MailSystem. I have the following case: A layout consists of multiple blocks and blocks consist of multiple types of content like text or an image.

I have a solution now to build this with Ember but the solution results in high coupled classes, and this results in code that is not very testable.

I have searched a lot for a good answer for this question but I can't find a good answer. I included a class diagram to explain the problem a bit better.

https://i.stack.imgur.com/Phb10.png

I have looked at a lot of examples, but can't find a useful pattern for this particular case. Any suggestions on how to implement this in a clear, maintainable and testable way?

Answer 1

After a lot of research and trying and creating prototypes i came up with a solution. Thanks to PsiX for suggesting Dependency Injection i included it in my prototype. I want to share the prototype with you guys if anyone would have the same question.

jsBin example