KnockoutJS - Reliure de texte

La liaison de texte amène l'élément DOM associé à afficher la valeur de texte du paramètre. Ceci est utilisé dans les éléments DOM au niveau du texte tels que<span> ou <em>. La liaison de texte accepte tous les types de données et les analyse en String avant de les rendre.

Syntax

text: <binding-value>

Parameters

KO définit le contenu de l'élément sur un nœud de texte avec la valeur de votre paramètre. Tout contenu précédent sera écrasé.
Si le paramètre est une observable, la valeur de l'élément est mise à jour chaque fois que la propriété sous-jacente change, sinon elle n'est affectée que pour la première fois.
Si quelque chose d'autre qu'un nombre ou une chaîne est passé, alors KO l'analyse dans un format de chaîne équivalent à yourParameter.toString ().
La valeur du paramètre peut également être une fonction JavaScript ou une expression JavaScript arbitraire qui renvoie une valeur de texte.

Example

Jetons un coup d'œil à l'exemple suivant qui illustre l'utilisation de la liaison de texte.

<!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

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

Enregistrez le code ci-dessus dans text-bind.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.

Example

Jetons un œil à un autre exemple dans lequel le texte est dérivé en utilisant 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

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

Enregistrez le code ci-dessus dans text-bind-fun.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.

Observations

Encodage HTML

La liaison de texte échappe les entités HTML, ce qui signifie qu'il est possible de définir n'importe quelle valeur String sans l'injecter. Par exemple -

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

Le code ci-dessus imprimera simplement <strong> Hi TutorialsPoint !!! </strong> sur l'écran. Cela ne rendra pas le texte en gras.

Utilisation de texte sans élément conteneur

Parfois, il n'est pas possible d'utiliser l'élément HTML pour définir le texte à l'intérieur d'un autre élément. Dans ces cas,container-less syntax peut être utilisé qui se compose de balises de commentaire comme suit

le  et  comment fonctionne comme des marqueurs de début et de fin, ce qui en fait une syntaxe virtuelle et lie les données comme s'il s'agissait d'un vrai conteneur.

Jetons un œil à l'exemple suivant.

<!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

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

Enregistrez le code ci-dessus dans text-bind-containerless.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
Notez que $ data binding context est utilisé ici pour afficher l'élément actuel du tableau.

↰ Previous page

KnockoutJS - Reliure de texte

Observations

Encodage HTML

Utilisation de texte sans élément conteneur

Tutoriel KnockoutJS