Re : How do you build nested components

I don't think that an approach where you nest javascript code within a mustache template is going to work. The 'nesting' of C2 would need to happen in the "browser renders this" bits of markup (near the .placeholder div) instead of the "canjs renders this" template.

Personally, I would avoid having components self-initialize at all -- I think it's easier to architect things when one component is in charge of managing others, so that all those other components can be 'dumb' and so that there's a clear hierarchy of who's in charge on the page (and who loads data, or spawns additional elements, etc).

That said, if you're going for self-contained, self-initializing components then something using data attributes might work:

1. <div id="c1">
2.       Non-template / wrapping markup for C1 goes here
3.       <div data-control="C1Control">
4.             <div class="c1-placeholder"></div>
   
5.             <!-- c2 render starts here using a server side include -->
6.                   (c2's code looks *exactly* like this c1 example code)
   
7.             <!-- c2 render stops here using a server side include -->
   
8.       </div>
9. </div>
   
10. <script type="text/javascript">
11.       /* definition for C1Control goes here --
12.        * and it's hardcoded to render c1-template into .c1-placeholder
    
13.        */
    
14. </script>
    
15. <script id="c1-template" type="text/mustache">
    
16.       <!-- C1's template goes here. It's 100% mustache template, nothing else -->
17. </script>
    

Then, after that markup has been added to the page (so that your inline javascript has executed to define the control class, and its template is available for rendering, etc), you look through it for elements with a data-control attribute. For each one, it invokes the specified control on that element. The control then renders the mustache template into a specific 'placeholder' div -- and if that template adds additional elements with data-control="..." attributes then those get invoked as well.

I'm not sure if that will quite give what you're after, but I think it would let you nest one component within another, using code like what's on jsbin.

There would be many downsides with this approach, though: rendering might be slow, you'll have to register global names for all your controls, and using a magic attribute for control invocation is a very "side effect"-ish way to do things. Sharing data/state between controls could be a mess as well. That's the only way I've done something similar to what you describe, though. (I once made a non-CanJS app which worked kinda like the above sample code, but it was a headache to maintain: the "self-contained" components had to be modified constantly just to suit their nested components -- such as needing multiple placeholder divs, as the component was 'broken up' by nested components -- when the whole idea was that they shouldn't need to know or care about those other components.)