amber / frontend / javascript / requirejs / smalltalk

O mundo além da tela, carregando modelos dinamicamente no Amber

Cenário

Esta é a estratégia que usei para carregar modelos em um frontend Amber:

  1. Você começa seu projeto Amber como de costume
  2. Faça a classe do controlador (Widget) que usará o template html
  3. Use o arquivo HTML estático inicial ou
  4. O #renderOn: de algum widget
  5. Para fazer um div com um id onde você inserirá o conteúdo: html div id: ‘bigTemplate’
  6. Use o require.js com o plugin de texto para carregar o template
  7. Use o callback dessa chamada para fazer seu controlador continuar o fluxo ou reagir conforme apropriado

Alguns dos benefícios que percebi até agora são:

  1. Copie e cole uma parte do código dos exemplos de bootstrap ou de qualquer outra fonte
  2. Faz colaboração com designers que fornecem HTML para ser menos atrito
  3. Permite que você use seu editor de texto favorito para compor html
  4. Libera você de usar a tela como a única maneira de obter html renderizado
  5. Lucros com os recursos de cache do navegador
  6. Torna seu código-fonte Amber menor
  7. Separação de interesses aprimorada , tornando seu código-fonte Amber mais focado no comportamento (Controladores) e vagamente acoplado à aparência (Visualizações)

Aposto que a barra de navegação do bootstrap será um exemplo 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'

Related Posts