Loading a donejs app into a section of a page

Out of the box donejs/steal uses done-autorender which takes over all the entire page and replaces it with whatever is in index.stache. That’s great if all you have on the page is your donejs app. But what if you need other content on the page?

For example our app is running inside of a wordpress plugin so we want to keep the wp theme, header and footer and just insert our donejs app in the main content area. Well, done-autorender is not going to work in this case.

@matthewp and @pYr0x gave me this answer:

Basically we want to override with a different main.js in the steal script where main.js replaces done-autorender and main.stache replaces index.stache. After that it’s business as normal and the whole app is rendered in the main div in your .html or .php file.

See the gist for all the code you’ll need to set this up.


Awesome, thanks for sharing!