Please enable JavaScript.

Coggle requires JavaScript to display documents.

KnockOut (Recursos (Observáveis e rastreamento de dependências, Ligações…

- - - - Elemento é maracado como "observável"
      - definir binds de diversos tipos
        
        Texto e aparencia
        
        Visible
        
        text
        
        Css
        
        style
        
        attr
        
        controle de fluxo
        
        foreach
        
        if
        
        ifnot
        
        campos de formulário
        
        Click
        
        value
        
        enable
        
        disable
        
        checked
        
        options
        
        Outros
        
        Binding virtual - serve para adicionar um binding sem perder a hierarquia do HTML.
        
        
        
        É possível usar as funções JS da propriedade, por exemplo, ao ter um array, é possível usar nomeObservable()..length
        
        Binding: with* - Cria um contexto/ambiente onde ele define o objeto do observable como “pai”, onde não é preciso chamar o objeto para cada atributo que for utilizar pertencente a ele.
    - - Beneficios
        
        Melhora legibilidade de código
        
        Carrega menos código em situações de listagens grandes
        
        Dinamiza a montagem, baseado em estados
      - Serve para aplicar DOM pré-definido de acordo com o comportamento do observable
      - <div class="col-xs-12" data-bind="template: {name: 'cabecalho-template', data: $data}"></div>
      - Template é definido em um <script></script>
        
        Com o observable, o DOM é carregado até o elemento que é referenciado.
        
        De acordo com os estados dos observable, a tela é atualizada
        
        DOM em tela!
  - - - Observaveis
        
        Leitura - myViewModel.personAge()
        
        Escrita - myViewModel.personName('Mary')
        
        Encadeada - myViewModel.personName('Mary').personAge(50)
        
        Conceitos
        
        subscribe - Inscrição explicita a situação de um observavel
        
        dispose - remoção da inscrição
        
        Computed
        
        Computed observables
        Ele serve para obter valores de um observador, porém mantem um link entre observadores, sempre verificando se houve alterações.
        
        Pure computed observables
        Mesma coisa que o computed observables, porém o “pure” gerencia as dependências e o uso de memória mais eficiente e deve ser usado quando dentro da função que você definiu, você modifica o valor de alguma observable
        
        Computed observables automáticos.
        Se o computed observable será usado apenas na UI (user interface), ele deveria ser criado como uma function, o knockout irá reconhecer as dependências existentes e criará um computed observable automaticamente.
        
        Formas de manupular/declarar
        
        Function()
        
        Lista/array
        
        elemento único
      - Binds
        
        O que é?
        Implementação de um objeto baseado no design patterns ”observable”, fornecendo uma maneira de conectar os dados do viewModel com a interface do usuário.
        
        Necessário definir 2 itens
        
        um nome que define o tipo de binding
        (para o knocout, é o atributo html “data-bind”)
        
        Ponte HTML/JS!
        
        Valor que define a propriedade que será
        vinculado a ele (podendo ser uma expressão
        JS válida).
      - Contexts
        
        "onde" um elemento existe
        
        Binding context
        
        objeto que contém dados que podem ser referenciados em seus Bindings
        
        Quando é usado applyBinding, o knockout cria e gerencia um Binding context, que é representado pela viewModel informado em ko.applyBindings(viewmodel)
        
        Ao usar um fluxo de controle (foreach), é criado um contexto filho para cada loop
        
        Propriedades automáticas - quando é utilizado uma function, o knockout cria uma binding automaticamente
        
        Níveis de contexto
        
        $root = contexto principal, posição mais alta da hierarquia
        
        $parents = coleção com todos os contextos
        
        $parent = contexto onde se origina o contexto atual
        
        $data = contexto corrente
        
        2 more items...
    - - Math.
      - Array.
      - etc...