KnockoutJS - Attr Binding

Esta ligação permite que você atribua elementos HTML dinamicamente attributeusando a propriedade ViewModel. Por exemplo, você pode definir o atributo src para uma imagem,title atributo para a página HTML, ou um href para um link na tag com base em valores em ViewModel.

Sintaxe

attr: <binding-object>

Parâmetro

O objeto JavaScript deve ser passado como um parâmetro no qual o nome da propriedade se refere ao nome do atributo e os valores se referem aos valores desejados a serem passados ao elemento DOM.
Vários atributos também podem ser atribuídos de uma vez. Suponha que você queira atribuir um título e um valor a href, então a vinculação terá a seguinte aparência -

<a data-bind = "attr: { href: courseUrl, title: courseTitle}">

courseUrl e courseTitle variáveis terão os valores desejados em ViewModel.

Se a propriedade ViewModel for um valor observável, o atributo é atribuído dependendo do novo valor de parâmetro atualizado. Se não for um valor observável, o atributo será atribuído apenas uma vez pela primeira vez.

Exemplo

Vamos dar uma olhada no exemplo a seguir, que demonstra o uso da ligação Attr.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS attribute binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <a data-bind = "attr: { href: courseUrl}">
         Click here for free online tutorials and courses.
      </a>

      <script type = "text/javascript">
         function AppViewModel() {
            this.courseUrl = ("http://tutorialspoint.com/");
         };
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código acima em attr-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.
O courseUrl atribuirá o valor ao atributo href no elemento HTML DOM.

↰ Previous page