In the boilerplatejs zip, there is a sample component (salesDashBoard) with two sub-components (chartViewPanel and treeViewPanel) The parent component defines a view.html with two divs with ids #tree and #chart, but the sub components are appended to this view instead of being rendered in these two divs.
Is there a way (maybe with a DomController ?) to attach subcomponents to specific DOM elements instead of just appending them ? That would be very useful, ideally I would love to have a hierarchy of Dom / Url controllers: the parents would intercept events and then route them to children, until a child routes an event (for a particular set of url / dom events) to a simple component with a MVVM.
The UI's rendering outside the defined div's was actually a bug and is fixed now.
Yes, you can attach sub view templates to specific DOM elements. The Boiler.ViewTemplate
accepts a parent parameter and you have to pass the DOM element which it needs to be rendered in.
As for the second part of your question, what you need is a hierarchy of contexts
. You can keep the controller hierarchy on UI components. Just convert all your UI components to be sub modules as well. Meaning each of your UI component will have a module.js
file and be child of the parent module. For example take a look at application.js
to see how it loads its child modules with Base.Context.loacChildContexts()
method.
You can read more about this concept under the "Product Modules" section on BoilerplateJS website