KnockoutJS - Enlace HTML

El enlace HTML hace que el elemento DOM asociado muestre el HTML especificado por el parámetro. Esto es muy útil si desea generar marcado HTML de forma dinámica.

Sintaxis

html: <binding-value>

Parámetros

  • KnockoutJS establece el contenido del elemento DOM en el valor del parámetro proporcionado. Esta funcionalidad también está disponible en JQuery. Si JQuery no está disponible, entonces se utiliza KO para lograrlo.

  • Si el parámetro es observable, el valor de los elementos se actualiza a medida que el subyacente observableestá cambiado. El elemento se procesa solo una vez, sino observable se utiliza.

Ejemplo

Echemos un vistazo al siguiente ejemplo que demuestra el uso del enlace 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

  • Guarde el código anterior en html-bind.htm archivo.

  • Abra este archivo HTML en un navegador.