1. Introdução
Esta série de artigos introduziu Bootstrap. Para detalhes, verifique este artigo: "Tutorial de Introdução ao Bootstrap". Desde que em projetos recentes, o front-end é fabricado pelo ASP.NET MVC + Knockoutjs + Bootstrap. Então comecei a escrever esta série novamente. Hoje, vamos dar uma olhada na estrutura MVVM do front -end da Web - Knockoutjs.
2. O que é Knockoutjs?
Qualquer pessoa envolvida no desenvolvimento do .NET deve saber que a estrutura do MVVM está integrada no WPF, então o KnockoutJS também é uma estrutura MVVM para o desenvolvimento da Web. Para simplificar, os benefícios do MVVM são separados do código de exibição da página, para que os projetos front-end possam ser melhor mantidos.
Antes, quando escrevemos páginas da web, o código JS e o código HTML eram misturados e o código foi preenchido com um grande número de objetos DOM. Esta estrutura de código é muito confusa. Com a estrutura MVVM, você pode dividir o código JS e o código HTML e a parte da operação de dados é mais simples. Você só precisa vincular os atributos de tag correspondentes a serem exibidos através da sintaxe correspondente (Data-Bind), acelerando assim a velocidade de desenvolvimento.
Knockoutjs é uma estrutura MVVM. De fato, em vez de chamar sua estrutura, deve ser uma biblioteca de classes MVVM. Como não possui a estrutura do MVVM, é um conceito relativamente "pesado", que deve incluir recursos como roteamento. No entanto, não há knockoutjs. Em comparação, os angulares devem ser chamados de estrutura MVVM mais apropriada.
As principais funções implementadas pelos knockoutjs são as seguintes:
Cadeiras declarativas: use sintaxe simples para associar dados do modelo aos elementos DOM. Isto é, a sintaxe "Data-Bind"
Rastreamento de dependência: estabeleça relacionamentos entre os dados do modelo para transformação e dados conjuntos. Por exemplo, o preço total de um produto é a soma dos preços de cada item do produto. No momento, o preço total do produto e os itens do produto podem ser usados para estabelecer um relacionamento usando a função de rastreamento de dependência. Isto é, é derivado da soma dos preços totais de cada item de commodities. Esse relacionamento é feito pela função calculada nos knockoutjs.
Atualização automática da interface do usuário: Quando o seu modelo de estado for alterado, a interface da interface do usuário será atualizada automaticamente. Isso é feito pela função observável.
Modelo: Escreva rapidamente UIs nidable complexos para os dados do seu modelo. Semelhante ao conceito de modelos no WPF.
Em seguida, usamos exemplos específicos para entender rapidamente o uso de knockoutjs.
3. Ligação declarativa
Vamos ver como usar a sintaxe de ligação de dados nos knockoutjs para vincular os dados do modelo aos elementos DOM.
1. Amarração unidirecional
<! Docttype html> <html> <head> <meta name = "viewport" content = "width = dispositivo-lar-ladrination"/> <title> denção de ligação </title </script <.. text/javasccript "src ="/uploads/rs/376/pbcX3e1z/" <body> <!-ligação unidirecional-> <div> <p> Primeiro nome: <forte data-bind = "text: primeironame"> </strong> </p> <p> sobrenome: <fort data-bind = "text: lastname"> </strong> </p> <p> primeiro nome: <input data-bind = "value"> nome "/ /></p> </div> <!--This script should be placed in the corresponding JS file in the actual project, and then referenced in the html through the Script tag--> <!--JS code is the business logic part, which separates the business logic from the Html code, making the View code more concise, so that it is easy to maintain in the later stage--> <script type="text/javascript"> function ViewModel () {this.firstname = "Tommy"; this.lastName = "li"; } ko.applybindings (new ViewModel ()); </script> </body> </html>2. O exemplo acima completa apenas a operação de ligação unidirecional. Ou seja, no exemplo acima, você descobrirá que, ao alterar o valor na tag de entrada e deixar o foco, o valor acima não será atualizado. De fato, a função de atualização automática nos knockoutjs não será adicionada automaticamente e a função correspondente precisa ser suportada. Esta função é a função observável. Vamos dar uma olhada no exemplo da ligação de mão dupla:
<! Doctype html> <html> <head> <meta name = "viewport" content = "width = dispositivo-lar-width"/> <title> Demo2-bi-Directional Binding </title> <script type = "text/javascript" src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </ad Head> <body> <!-BI-Directional Linding-> <div> <p> primeiro nome: <forte dados-bind = "text: firstname"> </strong> </p> LastName "> </strong> </p> <p> Primeiro nome: <input data-bind =" value: primeironame "/> </p> <p> sobrenome: <input data-bind =" value: lastName "/> </p> </div> <script type =" text/javascript "> function Viewel () {this.fir.fir.fir.fir. this.LastName = ko.observable ("li"); } ko.applybindings (new ViewModel ()); </script> </body> </html>4. Reliance no rastreamento
Em seguida, vamos ver como usar a função calculada no KO para concluir o rastreamento de dependência. O código de implementação do exemplo específico é o seguinte:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meman) type = "text/javascript" src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </sCript> </ad Head> <body> <!-bidirectional encadernação </strong> <rstrong> <rsttne> <strong> <strong> <strong> <n strong> <rusttion> <rusttion> <rsttry> <rsttrectional) <rstrong> <rstrong> <strong> <bodynd) <rstrong> <rustt) </streng) </pirtname <body) <body) <!-Nome <strong> </strong </strong </strong </strong </strong <strong> <body-th) <body) <body) <! LastName "> </strong> </p> <p> Primeiro nome: <input data-bind =" value: primeironame "/> </p> <p> Sobrenome: <input data-bind =" value: lastname "/> </p> <b> nome: <strong bind =" text: fullname "> </strust> </p> <blowly" Upper </button> </div> <script type = "text/javascript"> function viewModel () {this.firstname = ko.observable ("Tommy"); this.LastName = ko.observable ("li"); // depende de rastrear this.fullName = ko.computed (function () {return this.firstname () + "" + this.lastName ();}, este); // altere o valor do observável através do código this.capititizElastName = function () {this.LastName (this.lastName (). Touppercase ()); }; } ko.applybindings (new ViewModel ()); </script> </body> </html>Em seguida, vamos dar uma olhada em um exemplo de uso de ligação e dependência declarativa para rastrear pontos complexos. O código de exemplo específico é o seguinte:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <mem) type = "text/javascript" src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </adfody> <tody> <tim> <tr> <t> Nome <T. <Td> Preço </td> </tr> </thead> <tbody data-bind = "foreach: itens"> <tr> <td data-bind = "text: product.name"> </td> <td> <select Data-bind = "Opções: [1,2,3,5,6], value: value"> </select> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td Subtotal "> </td> <td> <a href ="#"data-bind =" clique: $ root.remove "> remover </a> </td> </tbor> </tabela> <h3> Botão <butt-bind = data-bind =" text: preço "> </span> </h3> <butt-bind = clique:" type = "text/javascript"> var Products = [{Nome: "Learnighighd Study Notes", Preço: 49}, {Nome: "Xiaomi Note", Preço: 999}, {Nome: "Macro Notebook", Preço: 4999}]; // Ordem de função da classe de pedido () {var self = this; this.items = ko.observableArray ([novo item (produtos [0], 1), novo item (produtos [1], 2)]); // Preço total do pedido this.price = ko.computed (function () {var p = 0; para (var i = 0; i <self.items (). Comprimento; i ++) {var item = self.items () [i]; p+= item.product.price * item.aMount ();} retorno p;,, self); this.remove = function (item) {self.items.remove (item); }; this.addComputer = function () {self.items.push (novo item (produtos [2], 1)); }; } // Item de linha Item da classe de função (produto, quantidade) {var self = this; this.Product = Product; this.amount = ko.observable (quantidade); // preço total do item de linha this.subtotal = ko.computed (function () {return self.amount () * self.product.price;}, self); } ko.applybindings (new order ()); </script> </body> </html>V. modelo
Depois de ler os exemplos acima, você deve realmente sentir que é muito fácil começar com o KO (a abreviação de knockoutjs). Como sua sintaxe é muito fácil de entender, vamos dar uma olhada no uso de modelos em KO.
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meman> <titlen> <titlet-title " type = "text/javascript" src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </sCript> </ad Head> <body> <!-Modelo Ligação, o conteúdo da div é a tag no modelo de pessoa-> - <strong data-bind = "text: idade"> </strong> </p> </div>-> <div data-bind = "modelo: 'PersonTemplate'"> </div> <script id = "PersonTemplate" type = "text/html"> <p> Nome: <Strong-bind = "Text: Nome"> </"</p" </p> idade "> </strong> </p> </script> <script type =" text/javascript "> var ViewModel = {name: ko.observable ('tommy'), idade: ko.observable (28), makeolder: function () {this.age (this.age () + 1); }}; Ko.ApplyBindings (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"/> <mem6> type = "text/javascript" src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <h2> "tempols </h2> são os participantes: foreach: pessoas} "> </div> <script type =" text/html "id =" PersonTemplate "> <h3 data-bind =" text: name "> </h3> <p> idade: <span data-bind =" text: idade "> </span> </p> </script> <script =" text/javview ""> </span> </ 'Tommy', idade: 27}, {nome: 'Frank', idade: 33}]; } ko.applybindings (new myViewModel ()); </script> </body> </html>Para obter mais informações sobre o uso de modelos, consulte a documentação oficial: http://knockoutjs.com/documentation/template-binding.html. Este artigo lista apenas o uso de modelos em 2.
6. Resumo
Neste ponto, o conteúdo do início rápido dos Knockoutjs acabou. Continuaremos a apresentar o conteúdo do KO no próximo artigo. O conteúdo do próximo artigo introduzirá como usar o KO para criar um projeto real. Não perca.