Search code examples
javascriptboilerplatejs

How to create a component hierarchy with boilerplatejs?


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.


Solution

  • 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