KnockoutJS - Enlace de texto

El enlace de texto hace que el elemento DOM asociado muestre el valor de texto del parámetro. Esto se usa en elementos DOM de nivel de texto como<span> o <em>. El enlace de texto acepta cualquier tipo de datos y lo analiza en String antes de representarlo.

Syntax

text: <binding-value>

Parameters

KO establece el contenido del elemento en un nodo de texto con el valor de su parámetro. Se sobrescribirá cualquier contenido anterior.
Si el parámetro es un observable, entonces el valor del elemento se actualiza cada vez que cambia la propiedad subyacente; de lo contrario, se asigna solo por primera vez.
Si se pasa algo que no sea un Número o una Cadena, entonces KO lo analiza en un formato de Cadena equivalente a yourParameter.toString ().
El valor del parámetro también puede ser una función de JavaScript o una expresión de JavaScript arbitraria que devuelve un valor de texto.

Example

Echemos un vistazo al siguiente ejemplo que demuestra el uso del enlace de texto.

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

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

Guarde el código anterior en text-bind.htm archivo.
Abra este archivo HTML en un navegador.

Example

Echemos un vistazo a otro ejemplo en el que el texto se deriva utilizando 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

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

Guarde el código anterior en text-bind-fun.htm archivo.
Abra este archivo HTML en un navegador.

Observaciones

Codificación HTML

El enlace de texto escapa a las entidades HTML, lo que significa que es posible establecer cualquier valor de cadena sin que se inyecte. Por ejemplo

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

El código anterior simplemente imprimirá <strong> Hola TutorialsPoint !!! </strong> en la pantalla. No hará que el texto esté en negrita.

Usar texto sin elemento contenedor

A veces no es posible usar un elemento HTML para colocar el texto dentro de otro elemento. En esos casos,container-less syntax se puede utilizar, que consta de etiquetas de comentarios que se muestran a continuación:

los  y  El comentario funciona como marcadores de inicio y fin, lo que lo convierte en una sintaxis virtual y vincula los datos como si fuera un contenedor real.

Echemos un vistazo al siguiente ejemplo.

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

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

Guarde el código anterior en text-bind-containerless.htm archivo.
Abra este archivo HTML en un navegador.
Tenga en cuenta que el contexto de enlace de $ datos se usa aquí para mostrar el elemento actual de la matriz.

↰ Previous page