El mundo más allá del lienzo, cargando plantillas dinámicamente en Amber

Esta es la estrategia que he usado para cargar plantillas en una interfaz Amber:

1. Usted comienza su proyecto de ámbar como de costumbre
2. Cree la clase del controlador (widget) que usará la plantilla html
3. Utilice el archivo html estático inicial o
4. El #renderOn: de algún widget
5. Para hacer un div con una identificación donde insertará el contenido: html div id: ‘bigTemplate’
6. Use require.js con el complemento de texto para cargar la plantilla
7. Use la devolución de llamada de esa llamada para que su controlador continúe el flujo o reaccione según corresponda

Algunos de los beneficios que he percibido hasta ahora son:

1. Copie y pegue una parte del código de los ejemplos de arranque o cualquier otra fuente
2. Hace que la colaboración con diseñadores que ofrece html sea sin problemas
3. Le permite usar su editor de texto favorito para redactar html
4. Le libera de usar el lienzo como la única forma de obtener html renderizado
5. Beneficios de las funciones de almacenamiento en caché del navegador
6. Hace que su código fuente de Amber sea más pequeño
7. Se mejoró la separación de preocupaciones al hacer que su código fuente de Amber se centre más en el comportamiento (Controladores) y se acople de manera flexible a las apariencias (Vistas)

Apuesto a que la barra de navegación de Bootstrap será un ejemplo popular:

AppNavBar>>renderOn: html 

  html div id: 'navbar'.

  "The navbar is a complex piece of html. 
  Lets forget the canvas way and grab it from a template. Bam!"
  require 
    value:(Array with: 'bower_components/text/text!views/navbar.html')
    value:[ :template | 
      '#navbar' asJQuery html: template].


AppNavBar>>initialize

  super initialize.

  AppRouter when: 'aboutToRoute' do:[ self clearActive ]

AppNavBar>>clearActive
  "Removes the .active class from all tabs"

  '.navbar-nav > li' asJQuery removeClass: 'active'