I am new to MVC-style javascript libraries, so pardon me if this question is too basic. I'm trying to write a [Single-Page Application](http://en.wikipedia.org/wiki/Single-page_application) entirely in [jQuery](http://jquery.com/) and [agility.js](http://agilityjs.com/). The examples given in the agility.js [documentation](http://agilityjs.com/docs) consist entirely of adding html elements to the document root. Question: Is there a 'Best-Practices' way to assemble a page by components.

Here is a rough outline of my html app:

```
<html>
    <head> ... </head>
    <body>
        <header> ... </header>
        <div id=PageHolder>
            <div id=AppPane_1></div>
            <div id=AppPand_2></div>
        </div>
        <footer> ... </footer>
    </body>
</html>

```

Within the 'AppPane' divs will be the content of the application.

Okay, given all of this, I'm not asking what can I do, but I'm asking what should I do.

I see from the documentation and my research that I have 3 choices:

1. create my page composition from atomic agility objects and assemble them in a `jQuery` document ready block. `$$.document.append(Foo)` works for the root element, but I could not figure out how to add Foo's children to foo.
2. Use one (very large) agility object which lays out the basic static html from above and append controls and whatnot to that using the `controller` functions (which I havn't been able to get to work either)
3. Use one root agility object and append all the children onto it using view (somehow, I havn't been able to get that to work either.)

Which of these is best, and what is the syntax involved? Thanks in advance, any guidance in assembling html components into a cogent agility app would be much appreciated.

<http://jsbin.com/ojenon/1/>

---