1. Introducción
Esta serie de artículos ha introducido Bootstrap. Para obtener más detalles, consulte este artículo: "Tutorial de introducción de Bootstrap". Dado que en proyectos recientes, el front-end lo realiza ASP.NET MVC + KnockoutJS + Bootstrap. Entonces comencé a escribir esta serie nuevamente. Hoy, echemos un vistazo al marco MVVM del front -end web: knockoutjs.
2. ¿Qué es Knockoutjs?
Cualquier persona que participe en el desarrollo de .NET debe saber que el marco MVVM está integrado en WPF, por lo que KnockoutJS también es un marco MVVM para el desarrollo web. En pocas palabras, los beneficios de MVVM se separan del código de visualización de la página, de modo que los proyectos front-end se puedan mantener mejor.
Antes, cuando escribimos páginas web, el código JS y el código HTML se mezclaron, y el código estaba lleno de una gran cantidad de objetos DOM. Esta estructura de código es muy confusa. Con el marco MVVM, puede dividir el código JS y el código HTML, y la parte de operación de datos es más simple. Solo necesita unirse a los atributos de etiqueta correspondientes para mostrar a través de la sintaxis correspondiente (unión de datos), lo que acelera la velocidad de desarrollo.
KnockoutJS es un marco MVVM. De hecho, en lugar de llamar a su marco, debería ser una biblioteca de clase MVVM. Debido a que no tiene el marco MVVM, es un concepto relativamente "pesado", que debería incluir características como el enrutamiento. Sin embargo, no hay knockoutjs. En comparación, AngularJS debe llamarse un marco MVVM más apropiado.
Las funciones principales implementadas por knockoutjs son las siguientes:
Enlaces declarativos: use la sintaxis simple para asociar los datos del modelo a los elementos DOM. Es decir, la sintaxis de "unión a datos"
Seguimiento de dependencia: Establezca relaciones entre los datos del modelo para la transformación y los datos conjuntos. Por ejemplo, el precio total de un producto es la suma de los precios de cada artículo del producto. En este momento, el precio total del producto y los elementos del producto se pueden usar para establecer una relación utilizando la función de seguimiento de dependencias. Es decir, se deriva de la suma de los precios totales de cada artículo de productos básicos. Esta relación se realiza mediante la función calculada en knockoutjs.
Actualización automática de la interfaz de usuario: cuando cambia el estado de su modelo, la interfaz de la interfaz de usuario se actualizará automáticamente. Esto se hace por la función observable.
Plantilla: escriba rápidamente la compleja UI compleja para los datos de su modelo. Similar al concepto de plantillas en WPF.
A continuación, usamos ejemplos específicos para comprender rápidamente el uso de knockoutjs.
3. Vieta declarativa
Veamos cómo usar la sintaxis de unión a datos en knockoutjs para vincular los datos del modelo a los elementos DOM.
1. Unido unidireccional
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Demo1-one-way binding</title> <script type="text/javascript" src="/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script></head> <body> < /> </p> </div> <!-Este script debe colocarse en el archivo js correspondiente en el proyecto real, y luego referenciado en el HTML a través de la etiqueta de script-> <!-El código JS es la parte de la lógica comercial, que separa la lógica comercial del código HTML, haciendo que el código de vista sea más conciso, para que sea fácil mantener en la etapa posterior en la etapa posterior-<script type = "text/javaScript" (() () ((vea la visión ". this.firstname = "Tommy"; this.lastName = "li"; } ko.applyBindings (nuevo ViewModel ()); </script> </body> </html>
2. El ejemplo anterior solo completa la operación de enlace unidireccional. Es decir, en el ejemplo anterior encontrará que al cambiar el valor en la etiqueta de entrada y dejar el foco, el valor anterior no se actualizará. De hecho, la función de actualización automática en KnockoutJS no se agregará automáticamente, y la función correspondiente debe ser compatible. Esta función es la función observable. Echemos un vistazo al ejemplo de vinculación bidireccional:
<! DocType html> <html> <head> <meta name = "viewport" content = "width = dispositivo-width"/> <title> Demo2-bi-direccional enlace </title> <script type = "text/javaScript" src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <!-enlace bi-direccional-> <div> <p> primer nombre: <strong data-bind = "text: firstName"> </strong> </p> <p> apellido: <strong data-bind = "text:" strong data-bind = "text: firstName"> </strong> </p> <p> apellido: <strong data-bind = "text:" strong data- " LastName "> </strong> </p> <p> Nombre del primer: <input data-bind =" valor: primer nombre "/> </p> <p> apellido: <input data-bind =" valor: lastName "/> </p> </div> <script type =" text/javascript "> function viewModel () {this.frirstname = ko.obsebable (" "" ""); "" "); this.lastName = ko.observable ("li"); } ko.applyBindings (nuevo ViewModel ()); </script> </body> </html>4. Dependencia del seguimiento
A continuación, veamos cómo usar la función calculada en KO para completar el seguimiento de la dependencia. El código de implementación del ejemplo específico es el siguiente:
< type="text/javascript" src="/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script></head><body> <!--Bidirectional binding--> <div> <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: LastName "> </strong> </p> <p> Nombre del primer: <input data-bind =" valor: primer nombre "/> </p> <p> apellido: <input data-bind =" valor: lastName "/> </p> <p> Nombre completo: <strong-bind =" Text: FullName "> </strong> </p> <Botton Data-bind =" Haga clic: CapitalNASTName " </div> <script type = "text/javaScript"> function ViewModel () {this.firstname = ko.observable ("tommy"); this.lastName = ko.observable ("li"); // depende de rastrear esto.fullName = ko.computed (function () {return this.firstname () + "" + this.lastName ();}, this); // Cambiar el valor de observable a través del código this.capitalizeLastName = function () {this.lastName (this.lastName (). ToUpperCase ()); }; } ko.applyBindings (nuevo ViewModel ()); </script> </body> </html>A continuación, echemos un vistazo a un ejemplo de uso de vinculación declarativa y dependencia para rastrear puntos complejos. El código de ejemplo específico es el siguiente:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Demo4-list binding</title> <script type="text/javascript" src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.0.js"> </stitting> </head> <body> <table> <thead> <tr> <tr> <td> name </td> <td> cantidad </td> <td> precio </td> <tbody data-bind = "foreach: elementos"> <tr> <td data-bind = "text: producto.name"> </td> <td> <select data-bind = "Opciones: [1,2,3,4,5,6], valor: cantidad"> </select> </td> <td data-bind = "text: subtotal"> </td> <td> <a href = "#"#"#" data-bind = "haga clic: $ root.remove"> eliminar </a> </td> </tbor> </table> <h3> Price de pedido: <span data-bind = "text: precio"> </span> </h3> <botón-bind = "haga clic: addComputer"> Agregar una computadora </botte> <script type = "text/javaScript" }, {nombre: "Nota Xiaomi", precio: 999}, {nombre: "cuaderno macro", precio: 4999}]; // orden de clases de orden orden () {var self = this; this.items = ko.observableArray ([nuevo elemento (productos [0], 1), nuevo artículo (productos [1], 2)]); // Precio de orden total this.price = ko.computed (function () {var p = 0; for (var i = 0; i <self.items (). Longitud; i ++) {var item = self.Items () [i]; p+= item.product.price * item.amount ();} return p;}, self); this.remove = function (item) {self.items.remove (item); }; this.addComputer = function () {self.items.push (nuevo elemento (productos [2], 1)); }; } // Elemento de función de clase de pedido de línea (producto, cantidad) {var self = this; this.product = Product; this.amount = ko.observable (cantidad); // Precio de pedido de la línea total this.subtotal = ko.computed (function () {return self.amount () * self.product.price;}, self); } ko.applyBindings (nuevo orden ()); </script> </body> </html>V. Plantilla
Después de leer los ejemplos anteriores, debe sentir que es muy fácil comenzar con KO (la abreviatura de KnockoutJs). Debido a que su sintaxis es muy fácil de entender, echemos un vistazo al uso de plantillas en KO.
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> DEMO5-TEMPLATE </Título type = "text/javaScript" src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <!-vinculante de plantilla, el contenido de la división es la etiqueta en la plantilla de la placa de persona->> <! --------------------------------------------------------------------------------------- <fuerte data-bind = "text: edad"> </strong> </p> </div>-> <div data-bind = "plantate: 'personTemplate'"> </div> <script id = "personTemplate" type = "text/html"> <p> name: <strong data-kind = "text: name"> </p> <p> edad: <prot strong data bind: "text:" text: "text:" Age "> </strong> </p> </script> <script type =" text/javascript "> var vermodel = {name: ko.observable ('Tommy'), edad: ko.observable (28), kequing: function () {this.age (this.age () + 1); }}; Ko.AplyBindings (ViewModel); </script> </body> </html> <! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> DEMO6-TEMPLATE </Título de los títulos type = "text/javaScript" src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <h2> participantes </h2> son los participantes: <iv data-bind = "script: n. foreach: personas} "> </div> <script type =" text/html "id =" personTemplate "> <h3 data-bind =" text: name "> </h3> <p> edad: <span data-bind =" text: age "> </p> </p> </script> <script type =" text/javaScript> function myviewmodel () 'Tommy', edad: 27}, {nombre: 'frank', edad: 33}]; } ko.applyBindings (new MyViewModel ()); </script> </body> </html>Para obtener más información sobre el uso de plantillas, consulte la documentación oficial: http://knockoutjs.com/documentation/template-binding.html. Este artículo solo enumera el uso de plantillas en 2.
6. Resumen
En este punto, el contenido del comienzo rápido de Knockoutjs ha terminado. Continuaremos presentándole contenido de KO en el próximo artículo. El contenido del próximo artículo presentará cómo usar KO para hacer un proyecto real. No te lo pierdas.