How to create Ember JS Complex App?

Hello Everyone!

I know that the topic’s title is not very precise, but let me explain. Well. I’m currently in the progress of creating the Ember JS proof-of-concept prototype app. After lots of struggles I managed to implement quite awesome modularity with use of Require JS. At this moment I’m working on within-app modularity.

What I am trying to achieve:

  • I want to be able to create component-like entities (i.e. dashboards, entrieslists) which could be fed with some data and which would have some code-behind logic for ui-event handling and or some data-manipulation code
  • I want these components code to be separate instances instead of seeing them sharing their scope
  • I want to be able to nest such components inside other components or views or templates
  • I want to be able to react on the ui-events on these components and best would be to bubble these to parent views, etc.
  • I would like to be able to somehow parameterize these by route parameters
  • …but still I want them to be route independent so that I can put these onto different routes

I have an example of such component. Imagine user-list component. It would be fed with userdata. It would have some ui-logic (for example after clicking some user entry, some subpanel with additional info would show up). It would also have some code-behind (i.e. for changing users privileges). And while I know it’s least likely realistic, but I would have two of them on one route and one another on the another route. Now imagine this first page with two of these. I would like the situation when clicking some entry on one component would show this subpanel only on this component, and none on both. I would also like that when I will for example change “name” property in one and won’t save it to the server, then the “name” property in the other one will stay as it was. I want them independent of themselves.

I was using ExtJS for almost a year and after some learning all of this (maybe without routes because app wasn’t changing the route) was possible. Now I got a little bit confused by Ember JS and I would like to ask you Guys… Is this possible in Ember? And if so, then how?

Today I was trying {{render}} helper, or {{view}} helper with passing content, then binding templates from different places and controllers also. Then I’ve tried with this.render() in routes. None of these ideas seem like it’s the good way for what I want.

Thanks in advance!

You should take a look at “Component” which is the closest thing that fits your description. Our app experienced quite a bit evolution and now converges on this componentish approach.