KnockoutJS - Binding HTML

L'associazione HTML fa sì che l'elemento DOM associato visualizzi l'HTML specificato dal parametro. Questo è molto utile se vuoi generare dinamicamente markup HTML.

Sintassi

html: <binding-value>

Parametri

  • KnockoutJS imposta il contenuto dell'elemento DOM sul valore del parametro fornito. Questa funzionalità è disponibile anche in JQuery. Se JQuery non è disponibile, viene utilizzato KO per ottenere ciò.

  • Se il parametro è observable, quindi il valore degli elementi viene aggiornato come e quando il sottostante observableè cambiato. L'elemento viene elaborato solo una volta, seno observable si usa.

Esempio

Diamo uno sguardo al seguente esempio che dimostra l'uso del binding 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice sopra in formato html-bind.htm file.

  • Apri questo file HTML in un browser.