KnockoutJS - Binding visibile

Come specificato dal nome, questa associazione fa sì che l'elemento DOM associato sia visibile o nascosto in base al valore passato nell'associazione.

Sintassi

visible: <binding-condition>

Parametri

  • Quando il parametro si trasforma in un valore simile a un falso (come booleano false, o 0, o null o undefined), il binding imposta display: none per yourElement.style.display rendendolo nascosto. Viene data maggiore priorità rispetto a qualsiasi stile esistente nei CSS.

  • Quando il parametro si trasforma in un valore true-like (come booleano true o oggetto o array non nullo), l'associazione rimuove il valoreElement.style.display, rendendolo visibile.

  • Se questa è una proprietà osservabile, l'associazione aggiornerà la visibilità ogni volta che la proprietà cambia. Altrimenti, imposterà la visibilità una volta sola.

  • Il valore del parametro può anche essere una funzione JavaScript o un'espressione JavaScript arbitraria che restituisce un valore booleano. L'elemento DOM viene reso visibile o nascosto in base all'output.

Esempio

Diamo un'occhiata al seguente esempio.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Visible Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>

   <body>
      <div data-bind = "visible: showMe">
         You are seeing this line because showMe function is set to true.
      </div>

      <script>
         function AppViewModel() {
            this.showMe = ko.observable(false);  // hidden initially
         }

         var vm = new AppViewModel();
         ko.applyBindings(vm);                  //  shown now
         vm.showMe(true);
      </script>

   </body>
</html>

Produzione

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

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

  • Apri questo file HTML in un browser.