KnockoutJS - Liaison HTML

La liaison HTML amène l'élément DOM associé à afficher le HTML spécifié par le paramètre. Ceci est très utile si vous souhaitez générer du balisage HTML de manière dynamique.

Syntaxe

html: <binding-value>

Paramètres

  • KnockoutJS définit le contenu de l'élément DOM sur la valeur de paramètre fournie. Cette fonctionnalité est également disponible dans JQuery. Si JQuery n'est pas disponible, KO est utilisé pour y parvenir.

  • Si le paramètre est observable, la valeur des éléments est mise à jour au fur et à mesure que le sous-jacent observableest changé. L'élément n'est traité qu'une seule fois, sino observable est utilisé.

Exemple

Jetons un coup d'œil à l'exemple suivant qui démontre l'utilisation de la liaison 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>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code ci-dessus dans html-bind.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur.