KnockoutJS - HTML Binding

A vinculação de HTML faz com que o elemento DOM associado exiba o HTML especificado pelo parâmetro. Isso é muito útil se você deseja gerar marcação HTML dinamicamente.

Sintaxe

html: <binding-value>

Parâmetros

KnockoutJS define o conteúdo do elemento DOM para o valor do parâmetro fornecido. Essa funcionalidade também está disponível em JQuery. Se o JQuery não estiver disponível, então KO é usado para conseguir isso.
Se o parâmetro for observable, então o valor dos elementos é atualizado como e quando o subjacente observableMudou. O elemento é processado apenas uma vez, seno observable é usado.

Exemplo

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

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Html binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p><span data-bind="html: welcomeMessgae "></span></p>
      
      <script>
         function AppViewModel() {
            this.welcomeMessgae = ko.observable();
            this.welcomeMessgae ("<strong>Welcome to TutorialsPoint !!! For free online tutorials and courses click <a href = 'https://tutorialspoint.com/'>here</a>.</strong>");
         }
         
         ko.applyBindings(new AppViewModel());
      </script>
      
   </body>
</html>

Resultado

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

Salve o código acima em html-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.

↰ Previous page