KnockoutJS - Configurazione dell'ambiente

È molto facile usare KnockoutJS. Fai semplicemente riferimento al file JavaScript utilizzando il tag <script> nelle pagine HTML.

È possibile accedere a Knockout.js nei seguenti modi:

  • Puoi scaricare la build di produzione di Knockout.js dal suo sito web ufficiale

    Verrà visualizzata una pagina come nell'immagine seguente. Fai clic sul link per il download e otterrai l'ultimo file knockout.js.

Ora fai riferimento al file come mostrato nel codice seguente.

<script type = 'text/javascript' src = 'knockout-3.3.0.js'></script>

Aggiorna l'attributo src in modo che corrisponda alla posizione in cui vengono conservati i file scaricati.

  • Puoi fare riferimento alla libreria KnockoutJS da CDN -

    • Puoi fare riferimento alla libreria KnockoutJS da Microsoft Ajax CDN nel tuo codice come segue:

<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
   type = "text/javascript"></script>

  • In alternativa puoi fare riferimento a una versione ridotta della libreria KnockoutJS da CDNJS come segue:

<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" 
   type = "text/javascript"></script>

Note - In tutti i capitoli di questo tutorial, abbiamo fatto riferimento alla versione CDN della libreria KnockoutJS.

Esempio

KnockoutJS si basa sul pattern Model-View-ViewModel (MVVM). Studieremo questo modello in profondità nel capitolo KnockoutJS - MVVM Framework . Per prima cosa diamo un'occhiata a un semplice esempio di KnockoutJS.

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

   <body>
      <!-- This is called "view" of HTML markup that defines the appearance of UI -->

      <p>First String: <input data-bind = "value: firstString" /></p>
      <p>Second String: <input data-bind = "value: secondString" /></p>

      <p>First String: <strong data-bind = "text: firstString">Hi</strong></p>
      <p>Second String: <strong data-bind = "text: secondString">There</strong></p>

      <p>Derived String: <strong data-bind = "text: thirdString"></strong></p>

      <script>
         <!-- This is called "viewmodel". This javascript section defines the data and 
            behavior of UI -->

         function AppViewModel() {
            this.firstString = ko.observable("Enter First String");
            this.secondString = ko.observable("Enter Second String");

            this.thirdString = ko.computed(function() {
               return this.firstString() + " " + this.secondString();
            }, this);
         }

         // Activates knockout.js
         ko.applyBindings(new AppViewModel());
      </script>

   </body>
</html>

La riga seguente si riferisce alla libreria KnockoutJS.

<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
   type = "text/javascript"> </script>

Questa riga fa riferimento alla libreria KnockoutJS.

Abbiamo due caselle di input: First String e Second String. Queste 2 variabili vengono inizializzate rispettivamente con i valori Enter First String e Enter Second String in ViewModel.

<p>First String: < input data-bind = "value: firstString" /> </p>

Questo è il modo in cui associamo i valori da ViewModel agli elementi HTML utilizzando 'data-bind' attributo nella sezione del corpo.

Qui, "firstString" si riferisce alla variabile ViewModel.

this.firstString = ko.observable("Enter First String");

ko.observable è un concetto che tiene d'occhio le modifiche del valore in modo che possa aggiornare i dati ViewModel sottostanti.

Per capirlo meglio, aggiorniamo la prima casella di input a "Hello" e la seconda casella di input a "TutorialsPoint". Vedrai che i valori vengono aggiornati simultaneamente. Studieremo di più su questo concetto nel capitolo KnockoutJS - Observables .

this.thirdString = ko.computed(function() {
   return this.firstString() + " " + this.secondString();
}, this);

Successivamente, abbiamo calcolato la funzione in viewmodel. Questa funzione deriva la terza stringa in base a 2 stringhe menzionate in precedenza. Pertanto, qualsiasi aggiornamento effettuato a queste stringhe viene automaticamente riflesso in questa stringa derivata. Non è necessario scrivere un codice aggiuntivo per eseguire questa operazione. Questo è solo un semplice esempio. Studieremo questo concetto nel capitolo KnockoutJS - Computed Observables .

Produzione

Salva il codice sopra come my_first_knockoutjs_program.html. Apri questo file nel tuo browser e vedrai un output come il seguente.

Modificare le stringhe in "Hello" e "TutorialsPoint" e l'output cambia come segue.