1. Routes
1.1. Router
1.1.1. Classe onde são mapeadas as rotas
1.1.2. this.route('nomeDaRoute')
1.1.2.1. nested routes
1.1.2.2. Delimitador para rota variável (:nome_do_parametro)
1.1.2.2.1. ex: id
1.1.2.3. { path: "/caminhoDiferenteDoNome" }
1.2. Hooks
1.2.1. beforeModel(transition)
1.2.1.1. aqui ficam as lógicas antes da rota carregar qualquer dado
1.2.1.2. verificar se o usuario não esta logado, por exemplo
1.2.2. model(params)
1.2.2.1. busca o/os dados principais da rota
1.2.2.2. Usando o helper {{LINK-TO}}
1.2.2.2.1. Quando você usa passando só o ID como parâmetro, vai trigar o método model() da rota
1.2.2.2.2. Quando você usa passando só o objeto inteiro, ele não triga a rota
1.2.3. afterModel(model, transition)
1.2.3.1. aqui fica a lógica depois do model ja ser carregado
1.2.4. redirect(model, transition)
1.2.4.1. redireciona para uma nova rota caso necessário
1.2.5. SetupController(controller, model)
1.2.5.1. por padrão, seta o model no controller
1.2.6. renderTemplate(controller, model)
1.2.6.1. se você quiser renderizar outro template em vez do padrão
1.2.6.2. e.g. templateName: 'posts/favorite-posts'
1.2.7. Activate()
1.2.7.1. chamado quando a rota está totalmente ativa
1.2.7.2. usado para setar CSS ou alguma coisa do genero (?)
1.2.8. deactivate()
1.2.8.1. função executada quando sai da rota
1.2.9. resetController(controller, isExiting, transition)
1.2.9.1. chamado depois do deactivate
1.3. actions
1.3.1. error
1.3.1.1. quando acontece algum erro na rota, como um erro num ajax, essa action é chamada
1.3.2. loading
1.3.2.1. qualquer momento em que a rota esta carregando, essa action é ativa
1.3.3. willTransition
1.3.3.1. ativado na hora que vai mudar de rota
1.3.3.2. pode ser usado pra avisar o usuário que vai perder os dados por exemplo
1.3.4. didTransition
1.4. fluxo
2. Controllers
2.1. Deprecated (?)
2.1.1. Usar o mínimo possível
2.1.2. Ainda é mantido por causa dos QueryParams
2.1.3. Usado também para actions de Template, caso não tenha componentes
2.2. Descreve como a UI se comporta
2.3. Uma controller é o arquivo javascript por trás do template, ou seja, todas as variáveis que estão disponíveis em um controller, estão disponíveis no Template da mesma
2.4. Mesmo se você não criar um controller o Ember cria um controller vazio para a rota
2.5. O método init() dele é executando antes do beforeModel() da rota
2.6. Singletons
2.6.1. Isso significa, que se você atribuir um valor a algum atributo do controller/template e sair do controller e depois voltar, ele ainda estará lá, caso nada o altere/apague
3. Components
3.1. São totalmente independente do contexto, não conhecem outras coisas, apenas suas variaveis e as variaveis passadas como argumento
3.2. Baseado em web components
3.3. Responsáveis por uma parte da UI
3.4. Possui seu template
3.5. Atributos
3.5.1. hasBlock
3.5.2. tagName
3.5.2.1. Define o nome da tag principal do componente
3.5.2.2. por padrão é uma div
3.5.3. Positional Params
3.5.3.1. Parametros que ao utilizar no Template, não é necessário passar o nome do atributo (e.g. link-to component)
3.5.4. classNameBindings
3.5.4.1. Este atributo serve para adicionar classes ao elemento principal de seu componente
3.5.4.2. Aqui também é possível usar uma computed property para setar uma classe
3.5.4.2.1. por exemplo:
3.6. hooks
3.6.1. init
3.6.2. didReceiveAttrs
3.6.3. willRender
3.6.4. didInsertElement
3.6.5. didRender
3.6.6. willUpdate
3.6.7. willDestroyElement
3.6.8. willClearRender
3.6.9. didUpdateAttrs
3.6.10. didDestroyElement
3.7. data down, actions up
3.7.1. Os dados vão da rota para baixo
3.7.1.1. Rota -> Controller -> Componente
3.7.2. As ações sobem do Template para Rota
3.7.2.1. Componentes -> Controller -> Rotas
3.7.3. Actions
3.7.3.1. this.sendAction
3.8. Multiplos yields
3.8.1. Caso você queira mais de um Yield no componente
3.8.1.1. Artigo com exemplo: Creating Nested Reusable Page Layouts In Ember
4. Services
4.1. Singletons
4.2. used to store long-lived state
4.3. Injetável via: Ember.inject.service()
5. Templates
5.1. handlebars
5.2. Descreve a UI
5.3. {{outlet}}
5.3.1. Responsável por renderizar os conteúdos das rotas aninhadas a ela
5.4. As variáveis que são globais em um Template são as variáveis do controller dela
6. Ember Data
6.1. Adapters
6.1.1. classe usada para definir o destino do request para cada método do store que precisa usar alguma API
6.1.2. Pode ser usado um adapter pra aplicação inteira ou um para cada model
6.1.3. exemplos
6.1.3.1. DS.Adapter
6.1.3.1.1. API de qualquer tipo, rest, graphql, define tokens, etc
6.1.3.2. DS.JSONAPIAdapter
6.1.3.2.1. é o adapter default do ember
6.1.3.3. DS.RESTAdapter
6.1.3.3.1. rest adapter, a aplicação espera uma api em rest
6.1.4. métodos / atributos
6.1.4.1. pathForType(type)
6.1.4.2. headers: {}
6.1.4.3. namespace
6.1.4.4. host
6.1.4.5. handleResponse
6.2. Serializers
6.2.1. classe usada para serializar os objetos tanto no request tanto no response
6.3. o fluxo do Adapter e serializer acontecem antes de chegar no model
6.4. Model
6.4.1. Representa uma entidade persistível
6.4.2. relacionamento entre models
6.5. Store
6.5.1. createRecord
6.5.2. findAll / findRecord / etc
6.5.3. update
6.5.4. destroy
6.5.5. peekAll / peekRecord
6.5.5.1. Usado para pegar dados do webstorage (cache)
6.6. Transforms
6.6.1. Usado para criar um novo tipo de atributo, um atributo transformador
6.6.2. Para ser usado nos Models
6.6.3. Serve para modificar o tipo de dado tanto antes de enviar numa requisição, quanto ao chegar uma resposta
6.6.4. Possui 2 métodos
6.6.4.1. serialize(deserialized)
6.6.4.2. deserialize(serialized)
7. Ember CLI
7.1. Generators e comandos que facilitam a programação (semelhante ao scaffold do rails)
7.2. Usado para executar testes, assets-pipeline, deploy
7.3. Broccoli.js
7.3.1. Assets Pipeline padrão do Ember
7.3.2. Utiliza o conceito de árvores para trabalhar
7.3.2.1. Quando arquivos são modificados, o broccoli só faz um build da Árvore que o arquivo estava, não precisa fazer o build de todo projeto
7.3.3. broccoli plugins
7.3.3.1. Copiar arquivos para um diretório destino
7.3.3.2. Pre-processar arquivos dentro de uma árvore e converter para outro formato (e.g. .scss para .css)
7.3.3.3. Fazer merge entre árvores (tipo fazer um rsync de um diretório pra outro)
7.3.3.4. Concatenar arquivos de um certo tipo em um só (bundling)
7.3.3.5. Uglifying
7.3.4. Eat your greens! A beginners guide to Broccoli.js
8. Tests
8.1. qUnit
8.1.1. async
8.1.2. deepEqual
8.1.3. expect
8.1.4. notDeepEqual
8.1.5. notEqual
8.1.6. ok
8.1.7. notOk
8.1.8. throws
8.2. aceitação
8.3. unidade
8.4. integração
8.5. Mirage
9. Conceitos e etc
9.1. Reatividade
9.1.1. Observers
9.1.1.1. O que é
9.1.1.1.1. é uma função que é chamada sempre que a variável no qual ele está escutando é alterada
9.1.1.1.2. Não pode ser usada em um template, afinal, é apenas uma função
9.1.1.2. Exemplo
9.1.1.2.1. ... logName: Ember.observer('name',function() { console.log( this.get('name') ); }); ...
9.1.2. Computed Properties
9.1.2.1. O que é?
9.1.2.1.1. pode escutar uma ou mais variáveis
9.1.2.1.2. como o nome já diz, é uma propriedade computada, ou seja, uma propriedade que é gerada por uma função
9.1.2.1.3. Pode ser usada em template pois é uma variável
9.1.3. Ao fazer um Computed ou Observer é possível pegar um atributo de uma lista
9.1.3.1. Ember.computed('[email protected]', function() { ... });
9.2. Initializers
9.2.1. Application Initializers
9.2.1.1. São executados no boot da Aplicação
9.2.1.2. Injeção de dependência
9.2.1.2.1. application.register(injectionName, classFactory, options)
9.2.1.2.2. application.inject(factoryNameOrType, property, injectionName)
9.2.1.3. deferReadiness()
9.2.1.3.1. Função a ser usada quando deseja num initializer um momento síncrono, esperando o retorno de um ajax por exemplo
9.2.1.4. advanceReadiness()
9.2.1.4.1. É utilizado para voltar o carregamento da aplicação
9.2.1.4.2. usado depois do deferReadiness(), depois do retorno de um ajax por exemplo
9.2.2. Instance Initializers
9.2.2.1. São executadas à medida que uma instância do aplicativo é carregada. Eles fornecem uma maneira de configurar o estado inicial do seu aplicativo, bem como configurar injeções de dependência locais para a instância do aplicativo
9.3. Ember.Application e Ember.ApplicationInstance
9.4. Run Loop
9.4.1. Filas com prioridade
9.4.1.1. sync
9.4.1.2. actions
9.4.1.3. routerTransitions
9.4.1.4. destroy
9.4.1.5. render
9.4.1.6. afterRender
9.5. Server-side Rendering
9.6. Aplicações Compostas
9.7. PWA
9.8. Single File Components
10. Mixins
11. Ember.Object
11.1. Todas as classes extendem de Ember.Object
11.2. Adiciona funcionalidades extras no Object padrão do javascript
11.3. métodos
11.3.1. .create()
11.3.2. .extend()
11.3.3. .get()
11.3.4. .set()
12. Arrays
12.1. Algumas funcionalidades úteis adicionadas nos Arrays do Ember, que é denominado: Enumerable
12.1.1. Preste atenção nos métodos de array
12.1.1.1. Quando for quiser que este array seja observável (e.g. que o each dele adicione o elemento quando você adicionar no array)
12.1.1.1.1. pushObject()
12.1.1.1.2. popObject()
12.1.1.1.3. reverseObjects()
12.1.1.1.4. shiftObject()
12.1.1.1.5. unshiftObject()
12.1.1.2. Se você usar os métodos padrão do array, eles não serão observáveis, isso quer dizer que eles vão adicionar no Array, mas não vão recarregar o each em que estão
12.1.2. Facilidades
12.1.2.1. Pegar o primeiro ou último do array
12.1.2.1.1. this.get('array.firstObject') ou array.get('firstObject')
12.1.2.1.2. this.get('array.lastObject') ou array.get('lastObject')
12.1.2.2. mapBy() filterBy() ...
12.1.2.3. every( (element, index, self) => ... )
12.1.2.3.1. retorna boolean
12.1.2.3.2. verifica se todos da lista retornam true em determinado atributo
12.1.2.3.3. exemplo
12.1.2.3.4. possui o método facilitador: isEvery( <atributo>, <true|false> )
12.1.2.4. any()
12.1.2.4.1. retorna boolean
12.1.2.4.2. verifica se pelo menos um da lista retorna true
12.1.2.4.3. possui o método facilitador: isAny( <atributo>, <true|false> )