KnockoutJS - Configuración del entorno

Es muy fácil de usar KnockoutJS. Simplemente consulte el archivo JavaScript usando la etiqueta <script> en las páginas HTML.

Se puede acceder a Knockout.js de las siguientes formas:

Puede descargar la versión de producción de Knockout.js desde su sitio web oficial

Se mostrará una página como en la siguiente imagen. Haga clic en el enlace de descarga y obtendrá el último archivo knockout.js.

Ahora consulte el archivo como se muestra en el siguiente código.

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

Actualice el atributo src para que coincida con la ubicación donde se guardan los archivos descargados.

Puede consultar la biblioteca KnockoutJS desde los CDN:

Puede consultar la biblioteca KnockoutJS de Microsoft Ajax CDN en su código de la siguiente manera:

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

Alternativamente, puede consultar una versión reducida de la biblioteca KnockoutJS de CDNJS de la siguiente manera:

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

Note - En todos los capítulos de este tutorial, nos hemos referido a la versión CDN de la biblioteca KnockoutJS.

Ejemplo

KnockoutJS se basa en el patrón Model-View-ViewModel (MVVM). Estudiaremos este patrón en profundidad en el capítulo KnockoutJS - MVVM Framework . Primero, echemos un vistazo a un ejemplo simple de 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 siguiente línea se refiere a la biblioteca KnockoutJS.

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

Esta línea se refiere a la biblioteca KnockoutJS.

Tenemos dos cajas de entrada: First String y Second String. Estas 2 variables se inicializan con los valores Enter First String y Enter Second String respectivamente en ViewModel.

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

Así es como enlazamos valores de ViewModel a elementos HTML usando 'data-bind' atributo en la sección del cuerpo.

Aquí, 'firstString' se refiere a la variable ViewModel.

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

ko.observable es un concepto que vigila los cambios de valor para poder actualizar los datos subyacentes de ViewModel.

Para entender esto mejor, actualice el primer cuadro de entrada a "Hola" y el segundo cuadro de entrada a "TutorialsPoint". Verá que los valores se actualizan simultáneamente. Estudiaremos más sobre este concepto en el capítulo KnockoutJS - Observables .

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

A continuación, hemos calculado la función en viewmodel. Esta función deriva la tercera cadena basada en 2 cadenas mencionadas anteriormente. Por lo tanto, cualquier actualización realizada en estas cadenas se refleja automáticamente en esta cadena derivada. No es necesario escribir un código adicional para lograr esto. Este es solo un ejemplo sencillo. Estudiaremos este concepto en el capítulo KnockoutJS - Computed Observables .

Salida

Guarde el código anterior como my_first_knockoutjs_program.html. Abra este archivo en su navegador y verá un resultado como el siguiente.

Modifique las cadenas a "Hello" y "TutorialsPoint" y la salida cambia de la siguiente manera.

↰ Previous page Next page ↱