KnockoutJS - Rilegatura del testo

L'associazione di testo fa in modo che l'elemento DOM associato visualizzi il valore di testo del parametro. Viene utilizzato negli elementi DOM a livello di testo come<span> o <em>. L'associazione di testo accetta qualsiasi tipo di dati e lo analizza in String prima di renderlo.

Syntax

text: <binding-value>

Parameters

  • KO imposta il contenuto dell'elemento su un nodo di testo con il valore del tuo parametro. Qualsiasi contenuto precedente verrà sovrascritto.

  • Se il parametro è osservabile, il valore dell'elemento viene aggiornato ogni volta che la proprietà sottostante cambia, altrimenti viene assegnato solo per la prima volta.

  • Se viene passato qualcosa di diverso da un numero o una stringa, KO lo analizza in un formato stringa equivalente a yourParameter.toString ().

  • Il valore del parametro può anche essere una funzione JavaScript o un'espressione JavaScript arbitraria che restituisce un valore di testo.

Example

Diamo uno sguardo al seguente esempio che dimostra l'uso dell'associazione del testo.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS text binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p data-bind = "text: hiThere"></p>

      <script>
         function AppViewModel() {
            this.hiThere = ko.observable("Hi TutorialsPoint !!!");
         }
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

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

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

  • Apri questo file HTML in un browser.

Example

Diamo un'occhiata a un altro esempio in cui il testo è derivato utilizzando Computed Observable.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS text binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p>Your full Name is <span data-bind="text: fullName"></span></p>

      <script>
         function AppViewModel() {
            this.firstName= ko.observable("John");
            this.lastName= ko.observable("Smith");

            this.fullName = ko.computed( function() {
               return this.firstName()+" "+this.lastName();
            },this);
         }
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
   
   </body>
</html>

Output

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

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

  • Apri questo file HTML in un browser.

Osservazioni

Codifica HTML

Il binding di testo sfugge alle entità HTML, il che significa che è possibile impostare qualsiasi valore String senza che venga iniettato. Ad esempio:

viewModel.message("<strong>Hi TutorialsPoint !!!</strong>");

Il codice precedente stamperà semplicemente <strong> Hi TutorialsPoint !!! </strong> sullo schermo. Non renderà il testo in grassetto.

Utilizzo di testo senza elemento contenitore

A volte non è possibile utilizzare l'elemento HTML per impostare il testo all'interno di un altro elemento. In tali casi,container-less syntax può essere utilizzato che consiste in tag di commento mostrati come segue:

Il <!--ko--> e <!--/ko--> comment funziona come marker di inizio e fine rendendola una sintassi virtuale e lega i dati come se fosse un vero contenitore.

Diamo un'occhiata al seguente esempio.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS container less text binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p data-bind="text: hiThere"></p>
      <select data-bind="foreach: items">
         <option> <!--ko text: $data --><!--/ko--></option>
      </select>

      <script>
         function AppViewModel() {
            this.hiThere = ko.observable("Days of week !!!");
            this.items = (['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday',
               'Sunday']);
         }
         
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

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

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

  • Apri questo file HTML in un browser.

  • Si noti che il contesto $ data binding viene utilizzato qui per visualizzare l'elemento corrente dall'array.