KnockoutJS - Vinculação de texto

A vinculação de texto faz com que o elemento DOM associado exiba o valor de texto do parâmetro. Isso é usado em elementos DOM de nível de texto, como<span> ou <em>. A vinculação de texto aceita qualquer tipo de dados e os analisa em String antes de renderizá-los.

Syntax

text: <binding-value>

Parameters

KO define o conteúdo do elemento para um nó de texto com o valor do seu parâmetro. Qualquer conteúdo anterior será sobrescrito.
Se o parâmetro for observável, o valor do elemento será atualizado sempre que a propriedade subjacente for alterada, caso contrário, será atribuído apenas pela primeira vez.
Se algo diferente de um Número ou String for passado, então KO o analisa em um formato String equivalente a yourParameter.toString ().
O valor do parâmetro também pode ser uma função JavaScript ou uma expressão JavaScript arbitrária que retorna um valor de texto.

Example

Vejamos o exemplo a seguir, que demonstra o uso de vinculação 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

Vamos realizar as etapas a seguir para ver como o código acima funciona -

Salve o código acima em text-bind.htm Arquivo.
Abra este arquivo HTML em um navegador.

Example

Vamos dar uma olhada em outro exemplo em que o texto é derivado usando 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

Vamos realizar as etapas a seguir para ver como o código acima funciona -

Salve o código acima em text-bind-fun.htm Arquivo.
Abra este arquivo HTML em um navegador.

Observações

Codificação HTML

A vinculação de texto escapa de entidades HTML, o que significa que é possível definir qualquer valor String sem injetá-lo. Por exemplo -

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

O código acima apenas imprimirá <strong> Hi TutorialsPoint !!! </strong> na tela. Não deixará o texto em negrito.

Usando texto sem elemento de contêiner

Às vezes, não é possível usar o elemento HTML para definir o texto dentro de outro elemento. Em tais casos,container-less syntax pode ser usado, que consiste em tags de comentário mostradas a seguir -

o  e  o comentário funciona como marcadores de início e fim, tornando-se uma sintaxe virtual e vincula os dados como se fossem um contêiner real.

Vejamos o exemplo a seguir.

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

Vamos realizar as etapas a seguir para ver como o código acima funciona -

Salve o código acima em text-bind-containerless.htm Arquivo.
Abra este arquivo HTML em um navegador.
Observe que o contexto de ligação de dados $ é usado aqui para exibir o item atual da matriz.

↰ Previous page