Como criar ligações personalizadas no Knockout.js?

Knockout é uma biblioteca JavaScript que ajuda a criar interfaces de usuário ricas e responsivas com um modelo de dados subjacente limpo. ¿ Como para criar ligações personalizadas em Knockout.js ?

O KO pode ajudá-lo a implementá-lo de maneira mais fácil e sustentável, desde que você tenha seções da interface do usuário atualizadas dinamicamente.

Como criar ligações personalizadas no Knockout.js?

Para criar a ligação personalizada, precisamos adicionar uma propriedade com o nome do link personalizado e atribuir um objeto com duas funções de retorno de chamada.

ko.bindingHandlers.myCustomBindingName = {
init: function (elemento, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
}
update: function (elemento, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
}
}

Aqui você pode ver que adicionamos uma propriedade myCustomBindingName atribuída a um objeto que iniciou e atualizou retornos de chamada. Vamos ver os retornos de chamada em detalhes.

Retorno de chamada

A função de retorno de chamada inicial será executada quando o link for aplicado pela primeira vez. Nesse retorno de chamada.

Podemos ter a configuração inicial necessária para o link personalizado , como anexar eventos, configurar o estado inicial das variáveis, etc.

Atualizar retorno de chamada

A função de atualização de retorno de chamada será chamada sempre que o observável associado for alterado. Vinculando seu controlador de link personalizado ao item.

Se você associou ou atribuiu um observável ao seu controlador de link personalizado, o retorno de chamada da atualização será executado sempre que você alterar o observável associado ou atribuído.

Por exemplo, você tem um controlador de link personalizado, diga ” animateItem ” que faz alguma animação toda vez que um item é adicionado à coleção.

O controlador de link animateItem aceita um observável que decide se o elemento agregado deve ser animado na tela ou não com base no valor observável verdadeiro ou falso.

Relacionado:  Quais são os melhores aplicativos de caça-níqueis para Android e iOS? Lista 2019

Sempre que você atualizar o observável , o retorno de chamada de atualização do retorno de chamada do seu link será chamado com o valor atualizado.

Parâmetros de funções de retorno de chamada

Essas funções de início e atualização de retorno de chamada têm o mesmo conjunto de parâmetros. Eles são elemento, valueAccessor, allBindingsAccessor, viewModel e bindingContext.

Exemplo
Vamos discutir o link personalizado com um exemplo . Criaremos um link personalizado onde podemos mostrar o log de alterações para uma caixa de entrada.

<p> Altere este valor: <inputdata-bind = "value: logEntry, valueUpdate: 'keyup'" /> </p>
<divdata-bind = "yourBindingName: logEntry">
<ul>
</ul>
</div>

Nesta exibição de exemplo, temos um elemento de entrada vinculado ao logEntry observável atribuído / associado ao link de valor. E temos uma div à qual vinculamos nosso link personalizado ” YourCoustomBinding “.

Como associamos o logEntry observável à nossa oferta personalizada, a função de retorno de chamada de atualização será executada sempre que o texto na caixa de entrada for modificado.

ko.bindingHandlers.yourBindingName = {
init: function (elemento, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
// Configure eventos, variáveis ​​..
$ (elemento) .css ("cor de fundo", "rgb (228, 222, 222)");
}
update: function (elemento, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var texto = ko.unwrap (valueAccessor ()); // Obtendo o texto do log de atualização
$ ('ul'). append ('<il> O novo texto é:' + text + '</il>'); // Adicionando na ul como il.
}
}
var viewModel = {logChange: ko.observable ("Digite algo")};
ko.applyBindings (viewModel);

Na função de retorno de chamada inicial, como configuração inicial, estamos definindo a cor de plano de fundo para o contêiner do log de alterações.

Quando você começar a alterar o texto, a atualização de retorno de chamada será chamada. Na atualização de retorno de chamada.

Estamos desenvolvendo o valueAccessor para obter o valor passado para o nosso link personalizado. Em seguida, adicionamos o texto modificado ao elemento ul como um elemento il.

 

Você pode estar interessado:

Deixe um comentário