Na série anterior de Knockoutjs Learning Series (i) KO, foi mencionado que o método de ligação de dados de dados de dados = "xx: oo" em KO pode não apenas vincular o texto, o valor etc., mas também vincular atributos visíveis, estilo e outros atributos, clique, textinput e outros eventos e até o fluxo de programas de controle. Vários pacotes sofisticados definitivamente satisfarão sua fantasia.
O seguinte fala brevemente sobre o uso de várias ligações, que são divididas principalmente em três tipos: representação, processo e interação de acordo com as propriedades vinculadas.
Atributos de desempenho
Os atributos de ligação da classe de apresentação incluem visível, texto, html, css, estilo e att. Exceto pela classe que o CSS representa CSS, é fácil entender todo o resto. Obviamente, a nomeação em estilo deve ser consistente com JS e deve ser removida - alterada para nomeação de camelos, como mostrado abaixo:
<!-html code-> <div data-bind = "visível: deve-ShowMessage"> Você verá esta mensagem somente quando "MustSoShowMessage" mantém um valor verdadeiro. Lucrowarning: CurrentProfit () <0} "> CSS Classe Teste de ligação </div> <div data-bind =" Estilo: {color: CurrentProfit () <0? {MustSoShowMessage: ko.observable (true), // mensagem inicialmente visível ko.observable (150000), // valor positivo, então inicialmente Blackurl: Ko.observable ("EN-END.HTML"), URLTITLE: KO.OBSERVABLE ("Relatório incluindo estatísticas finais do final do ano")}; Ko.ApplyBindings (ViewModel); // Aplique ligaçõesO efeito é assim:
Como mencionado no artigo anterior, além dos atributos individuais do XXOO, você também pode passar nos objetos JSON, ou seja, combinar atributos de ligação, como:
<!-Código HTML-> <div data-bind = "{visível: deve-ShowMessage, texto: myMessage, css: {fuctwarning: currentprofit () <0}}"> você verá esta mensagem somente quando "deve fazer o programa" mantém um valor verdadeiro. </Div>Claro que o efeito é assim:
A configuração da classe de apresentação é relativamente simples. Uma coisa a observar é que muitas classes de apresentação não precisam ser alteradas dinamicamente. Neste momento, você pode usar as configurações do ViewModel para obter a inicialização centralizada dos dados, mas não os definir como observáveis, como:
// js codevar viewModel = {deve -showmessage: ko.observable (true), // mensagem inicialmente visiblemessage: 'Este texto não requer atualização dinâmica' // inicialmente em branco};Atributos da classe de processo
As classes de processo incluem foreach, se, ifNOT, com e mais avançadas ligações "componentes". Se e o IFNOT são semelhantes a visíveis. A diferença é: se remover diretamente os componentes correspondentes do DOM, enquanto o visível controla apenas a tela oculta e os componentes ainda estão no DOM. com o mesmo efeito que em JS, que é estender a cadeia de escopo. Em termos simples, é adicionar um 'prefixo'. antes da variável. Aqui, vou apresentar apenas o foreach e o componente é colocado junto com a ligação do modelo.
Confira o código:
<!-HTML Code-> <p> Teste para a ligação </p> <ul data-bind = "foreach: pessoas"> <li> No. <span data-bind = "texto: $ index"> </span> Nome das pessoas: <span data-bind = "text: name"> </span> <a href = "#" data-bind = "click: $: $ patern.rep (name"> </span> <a href = "#" data-bind = "clique: $: $ patern.rep (name"> </span> <a href = "#" data-bind = "clique: $: $. href = "#" data-bind = "clique: remover"> remover </a> </li> </ul> <input type = "button" data-bind = "clique: addpeople" value = "add"/> var listModel = function () {// Defina o valor do conjunto de pessoas (as pessoas são realmente uma função Array). Use foreach para atravessar o objeto da matriz // ul, li corresponde aos filhos de pessoas e pessoas. Portanto, ao vincular internamente, o escopo está no povo filho {nome ...}. Para ligar para a remoção de pessoas fora, é necessário um pai // se for chamado Remover internamente, isso é removido é {nome ...} correspondente ao item LI atual, e o escopo é o domínio atual, nenhum pai é necessário. this.people = ko.observableArray ([{name: "Mark Zake", Remover: function () {that.people.remove (this); // observe o objeto atual (isto é {nome ...}) e escopo. Não se preocupe com as tags html, a função pura de js é simples}}, {Nome: " {that.people.remove (this);}}, {name: "verde negar", remover: function () {that.people.remove (this);}}]); // adpeople chama o método do mesmo nível de pessoas internamente. Isso mudará, e isso deve ser salvo antecipadamente e passado. O que você deseja executar é listmodel.people.remove (a.parent) this.removepeople = function () {that.people.remove (this);}}; ko.applybindings (new listmodel ());O que é mais fácil mexer aqui é a correspondência hierárquica entre o nó DOM e o viewmodel. Primeiro, aplique a ligação para a UL, ou seja, cada LI corresponde a cada criança. Depois disso, corresponde a ele, você pode entendê -lo de acordo com as regras do escopo de JS. Falando em escopo, tenho que mencionar isso. Como diz o ditado, trato isso como se fosse meu primeiro amor, e isso me enganou milhares de vezes. Aqui, a Xiaojia adicionou uma função de remoção à versão oficial, que é simples de corresponder às pessoas de remoção oficiais. Quanto a variáveis como $ index e $ parent, apenas compreendi -las literalmente.
Atributos da classe de interação
Finalmente, é hora de entender o ponto. A razão mais importante para o uso do KO é lidar com o problema dinâmico de apresentação da interface interativa. Aqui, apresentaremos algumas ligações relacionadas aos formulários.
(1) Clique em Ligação
Sintaxe: Data-Bind = "Clique: ClickHandler". A função ClickHandler aqui pode ser qualquer função, não necessariamente uma função no ViewModel, desde que possa ser referenciada. Há algumas coisas a serem observadas sobre o evento de clique:
1. Passagem do parâmetro, KO passa o componente atual como o primeiro parâmetro para a função ClickHandler por padrão. Preste atenção ao contexto de ligação atual aqui. Por exemplo, no ambiente com o ambiente, o componente retornado se tornará o componente com o componente em vez do componente atual que você deseja. Se você também precisar passar no parâmetro do evento, passe o evento como o segundo parâmetro. Se você precisar passar em mais parâmetros, precisará envolvê -lo com uma função. como:
<Button data-bind = "Click: function (dados, evento) {myfunction ('param1', 'param2', dados, evento)}"> clique em mim </butut>2. Configurações do comportamento padrão (como links)
O KO é proibido por comportamento padrão do evento, e geralmente ligamos eventos de cliques para links e não os deixamos pular. No entanto, se você precisar ativá -lo, basta retornar true no clickhandler.
3. Bolha
KO pode borbulhar por padrão. Você pode definir o evento de clique em não borbulhar por data-bind = "clique: ClickHandler, Clickbubble: false".
(2) Ligação de eventos
O KO fornece essa interface para os usuários personalizarem eventos de ligação. Em relação à passagem de parâmetros, comportamento padrão, borbulha, etc., o mesmo que cliques de ligação, caso de uso:
<div> <div data-bind = "Evento: {mouseOver: enabledEtails, mouseout: desabilabedEtails}"> mouse sobre mim </div> <div data-bind = "visible: detweetenabled"> Detalhes </div> </scripts <script type = "text/javascript"> var vista ({{staftS> {this.detailsenabled (true);}, desabilableTails: function () {this.detailsenabled (false);}}; ko.ApplyBindings (ViewModel); </script>(3) Envie a ligação
É usado principalmente para fazer algum trabalho de formulário de verificação. KO bloqueará a ação do formulário de envio padrão e a transferência para a função de envio. Quando você precisar enviar no futuro, retorne o verdadeiro evento de ligação.
PS: Por que não usar eventos de clique no formulário para lidar com isso? Como o envio foi originalmente projetado para lidar com eventos de envio, ele também pode aceitar ações de envio, como o retorno do carro, mas o clique não pode.
(4) O valor é obrigado a textinput
O valor de ligação e o TextInput na caixa de entrada parecem semelhantes, mas é mais recomendável usar o evento TextInput para ligação, porque o TextInput é um novo especificamente usado para lidar com eventos de entrada. Como você pode ver no artigo anterior, ao usar a entrada de ligação ao valor (à esquerda), o foco deve ser movido para fora da caixa de entrada antes de ser atualizado, enquanto o TextInput (direita) é atualizado imediatamente.
Embora a ligação do valor também possa atingir o mesmo efeito que o textInput definindo data-bind = "{value: preço, valueUpdate: 'AfterKeydown'}", isso não é tão compatível com o textinput no navegador.
(5) Opções de ligação (SelectedOptions)
Na lista suspensa, as opções podem ser usadas para vincular o valor da criança. A criança pode ser uma corda ou um objeto JS. O artigo anterior ([Journy Learning Experience Journey] (1) KO First Experience) mostra strings, e desta vez vou passar um objeto:
Código:
<p> Seu país: <select data-bind = "Opções: disponibilizações, optionscaption: 'escolha ...'"> </leclect> </p> <div data-bind = "visível: seletedCountry"> <!-aparece quando você seleciona algo-> Select: um country com a população <! SelectedCountry (). CountryPopulation: 'Unknown' "> </span>. País ("UK", 65000000), novo país ("EUA", 320000000), novo país ("Suécia", 29000000)]), selecionadoCountry: ko.observable () // nada selecionado por padrão}; ko.applybindings (ViewModel); </script>Aqui está uma opção para vincular a opção da caixa de listagem e um valor é usado para vincular o item selecionado. Como as opções são objetos JS, você precisa usar um OptionText para especificar a exibição na caixa de listagem. O OptionCaption refere -se ao valor de exibição padrão quando nenhum item é selecionado. Se definirmos uma caixa de listagem de múltiplas seleções, não podemos usar o valor para vincular itens selecionados. No momento, as seletas devem ser usadas para ligar itens selecionados.
(6) Outras ligações: ativar/desativar, hasfocus, verificado, nome exclusivo.
Esses eventos são muito simples de usar, por isso não os apresentarei em detalhes. O último nome exclusivo é usado para definir o atributo de nome exclusivo do controle do formulário. Quando o formulário é enviado ao plano de fundo, ele não será enviado ao plano de fundo sem definir o valor do atributo de nome, portanto, existe uma função de ligação. Há outro efeito relativamente comum no Hasfoucus no site oficial:
Nome:
Nome: Bert Bertington
Clique no nome para editá -lo; Clique em outros lugares para aplicar alterações.
Clicar no nome acima pode se tornar editável e depois perder o foco e depois se tornar texto comum. Esse efeito é bastante simples de implementar com o KO.
Resumir
Este artigo apresenta principalmente os métodos de uso de várias ligações nos knockoutjs . Usando a combinação desses métodos de ligação, você pode simplesmente criar uma página da interface do usuário que requer interações mais dinâmicas. A coisa mais importante a usar esses métodos é lembrar que todas as ligações são objetos de função, para que você possa operar diretamente no HTML, para que a estrutura do código JS às vezes possa ser mais simples.
Tutorial oficial: http://knockoutjs.com/documentation/introduction.html