This is the strategy I've used for loading templates in an Amber frontend:
- You start your Amber project as usual
- Make the controller (Widget) class that will use the html template
- Use either the initial static html file or
- The #renderOn: of some widget
- To make a div with an id where you'll insert the content: html div id: 'bigTemplate'
- Use require.js with the text plugin to load the template
- Use the callback of that call to make your controller continue the flow or react as appropriate
Some of the benefits I've perceived so far are:
- Copy paste a portion of code from the bootstrap examples or any other source
- Makes collaboration with designers that delivers html to be friction-less
- Allows you to use your favourite text editor for composing html
- Liberates you from using the canvas as the only way to get html rendered
- Profits from the caching features of the browser
- Makes your Amber source code smaller
- Improved separation of concerns by making your Amber source code more focused on behaviour (Controllers) and loosely coupled with looks (Views)
I bet that bootstrap's navbar will be a popular example:
html div id: 'navbar'.
"The navbar is a complex piece of html.
Lets forget the canvas way and grab it from a template. Bam!"
value:(Array with: 'bower_components/text/text!views/navbar.html')
value:[ :template |
'#navbar' asJQuery html: template].
AppRouter when: 'aboutToRoute' do:[ self clearActive ]
"Removes the .active class from all tabs"
'.navbar-nav > li' asJQuery removeClass: 'active'