1. Введение
Эта серия статей представила начальную загрузку. Для получения подробной информации, пожалуйста, ознакомьтесь с этой статьей: «Учебное пособие по введению Bootstrap». Поскольку в недавних проектах фронт-END производится ASP.NET MVC + Nockoutjs + Bootstrap. Итак, я снова начал писать эту серию. Сегодня давайте посмотрим на структуру MVVM фронта, но nockoutjs.
2. Что такое нокаут?
Любой, кто занимается разработкой .NET, должен знать, что структура MVVM интегрирована в WPF, поэтому nockoutJS также является структурой MVVM для веб -разработки. Проще говоря, преимущества MVVM отделены от кода отображения страницы, так что передние проекты могут быть лучше поддержаны.
Раньше, когда мы писали веб -страницы, код JS и HTML -код были смешаны вместе, и код был заполнен большим количеством объектов DOM. Эта структура кода очень запутанна. С структурой MVVM вы можете разделить код JS и HTML -код, а часть операции данных проще. Вам нужно только привязаться к соответствующим атрибутам тега, чтобы отобразить через соответствующий синтаксис (связывание данных), тем самым ускоряя скорость развития.
Knockoutjs - такая структура MVVM. На самом деле, вместо того, чтобы называть свою структуру, это должна быть библиотека классов MVVM. Поскольку он не имеет структуры MVVM, это относительно «тяжелая» концепция, которая должна включать такие функции, как маршрутизация. Тем не менее, нет нокаутов. Для сравнения, Angularjs следует называться более подходящей структурой MVVM.
Основные функции, реализованные нокаутированием, заключаются в следующем:
Декларативные привязки: используйте простой синтаксис, чтобы связать данные модели с элементами DOM. То есть синтаксис "связывания данных"
Отслеживание зависимости: установить взаимосвязь между данными модели для преобразования и совместными данными. Например, общая цена продукта - это сумма цен на каждый пункт продукта. В настоящее время общая цена продукта и предметов продукта может быть использована для установления взаимосвязи с использованием функции отслеживания зависимостей. То есть это происходит от суммы общих цен каждого товара. Эта связь осуществляется вычисленной функцией в нокаутировании.
Автоматическое обновление пользовательского интерфейса: когда изменится состояние вашей модели, интерфейс пользовательского интерфейса будет автоматически обновлен. Это делается наблюдаемой функцией.
Шаблон: быстро напишите сложные знаменитые интерфейсы для данных для вашей модели. Аналогично концепции шаблонов в WPF.
Далее мы используем конкретные примеры, чтобы быстро понять использование нокаутов.
3. декларативное связывание
Давайте посмотрим, как использовать синтаксис связывания данных в nockoutjs, чтобы связать данные модели с элементами DOM.
1. Одностороннее переплет
<! Doctype html> <html> <head> <meta name = "viewport" content = "width = width device"/> <title> Demo1-one-way Привязка </title> <script type = "text/javascript" src = "/uploads/rs/376/pbcx3e1z/nockout-3.4.0. <body> <!-одностороннее привязка-> <d Div> <p> Имя: <Strong Data-bind = "text: FirstName"> </strong> </p> <p> Фамилия: <strong data-bind = "text: lastName"> </strong> </p> <p> Имя: <входные данные bind = "value: firstName"/> </p> <p> /> </p> </div> <!-Этот скрипт должен быть размещен в соответствующем файле JS в фактическом проекте, а затем упоминается в HTML через тег скрипта-> <!-JS-код-это бизнес-логика, которая отделяет бизнес-логику от HTML-кода, что делает код представления более кратким, так что это легко поддерживать на более позднем этапе-> <ScriptScript/html TypeScript/jSaVcrip/jSaVcrip. {this.firstname = "tommy"; this.lastName = "li"; } ko.applybindings (new ViewModel ()); </script> </body> </html>2. Приведенный выше пример завершает только одностороннюю операцию привязки. То есть в приведенном выше примере вы обнаружите, что при изменении значения в входном теге и оставлении фокуса вышеуказанное значение не будет обновлено. Фактически, функция автоматического обновления в nockoutjs не будет добавлена автоматически, и необходимо поддерживать соответствующую функцию. Эта функция является наблюдаемой функцией. Давайте посмотрим на пример двустороннего переплета:
<! Doctype html> <html> <head> <meta name = "viewport" content = "width = width Device"/> <Title> Demo2-BI-направление связывания </title> <script type = "text/javascript" src = "/uploads/rs/376/pbcx3e1z/nockout-3.4.0.js"> </script> </head> <body> <!-двунаправленная связка-> <p Div> <p> Имя: <Strong Data-bind = "Текст: FirstName"> </press> </P> Lastname "> </strong> </p> <p> Имя: <input data-bind =" value: FirstName "/> </p> <p> Фамилия: <input data-bind =" value: lastname "/> </p> </div> <script type =" text/javascript "> functionmodel () {this.firstname = ko.observable"> functable "; this.lastname = ko.observable ("li"); } ko.applybindings (new ViewModel ()); </script> </body> </html>4. Опора на отслеживание
Далее, давайте посмотрим, как использовать вычислительную функцию в KO для завершения отслеживания зависимостей. Код реализации конкретного примера заключается в следующем:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <meta http-eviv = "content-type" content = "text/html; charset = utf-8"/> <Tite> DeMo-Dependency. type = "text/javascript" src = "/uploads/rs/376/pbcx3e1z/nockout-3.4.0.js"> </script> </head> <body> <!-Biderectional Binding-> <d Div> <p> Имя: <strong Data-bind = "text: FirstNam LASTNAME "> </strong> </p> <p> Имя: <input data-bind =" value: firstname "/> </p> <p> Фамилия: <input data-bind =" value: lastname "/> </p> <p> Полное имя: <Strong Data-bind =" Text: FullName "> </prost> </p> </p> </p> кнопка button =" captizelastmam </div> <script type = "text/javascript"> function viewmodel () {this.firstname = ko.observable ("tommy"); this.lastname = ko.observable ("li"); // зависит от отслеживания этого .fullName = ko.computed (function () {return this.firstname () + "" + this.lastname ();}, это); // изменять значение наблюдаемого через код this.capitalizelastname = function () {this.lastname (this.lastname (). Touppercase ()); }; } ko.applybindings (new ViewModel ()); </script> </body> </html>Далее, давайте посмотрим на пример использования декларативной привязки и зависимости для отслеживания сложных точек. Конкретный пример кода заключается в следующем:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-eviv = "content-type" content = "text/html; charset = utf-8"/> <Tital> demo4-list </html; charset = utf-8 type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"></script></head><body> <table> <thead> <tr> <td>Name</td> <td>Amount</td> <td>Price</td> </tr> </thead> <tbody data-bind = "foreach: элементы"> <tr> <td data-bind = "text: product.name"> </td> <td> <select Data-bind = "Варианты: [1,2,3,4,5,6], значение: сумма"> </selet> </td> <td data-bind = "text: subtotal"> </selet> </td> <td data-bind = " href = "#" data-bind = "click: $ root.remove"> remove </a> </td> </tbor> </table> <h3> Цена заказа: <span data-bind = "text: price"> </span> </h3> <button Data-bind = "click: addCompust"> Добавить компьютер </spript> <script type = "text/javascript"> [vare-varege) [varege varege) [varege varege </scipt varege = varege) </javascript [varege: varege </varege) Примечания ", цена: 49}, {имя:" xiaomi note ", цена: 999}, {name:" Macro Notebbook ", цена: 4999}]; // Заказ Функции класса порядок () {var self = this; this.items = ko.observablearray ([новый элемент (продукты [0], 1), новый элемент (продукты [1], 2)]); // Общая цена заказа this.remove = function (item) {self.items.remove (item); }; this.addcomputer = function () {self.items.push (новый элемент (продукты [2], 1)); }; } // Линьевый элемент класса класса (продукт, сумма) {var self = this; this.product = продукт; this.amount = Ko.observable (сумма); // Общая цена строки this.subtotal = ko.computed (function () {return self.amount () * self.product.price;}, self); } ko.applybindings (new Order ()); </script> </body> </html>V. Шаблон
После прочтения приведенных выше примеров, вы должны почувствовать, что очень легко начать с KO (аббревиатура нокаутов). Поскольку его синтаксис очень легко понять, давайте посмотрим на использование шаблонов в KO.
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-eviv = "content-type" content = "text/html; charset = utf-8"/> <title> demo5-tempt type = "text/javascript" src = "/uploads/rs/376/pbcx3e1z/nockout-3.4.0.js"> </script> </head> <body> <!-Привязка шаблона, содержание Div является тегом в шаблоне PersonTemptemptement-> <! ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- <Strong Data-bind = "Text: Age"> </strong> </p> </div>-> <div Data-bind = "Template: 'PersonTemplate'"> </div> <script id = "persontemplate" type = "text/html"> <p> name: <strong data-bind = text: name "> </plorn> </p> <p> agind: <strong data = name: name"> </plorn> </p> <p> agind = "name: name"> </plorn> </p> <p> agind = " возраст "> </strong> </p> </script> <script type =" text/javascript "> var viewmodel = {name: ko.observable ('tommy'), возраст: 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-eviv = "content-type" content = "text/html; charset = utf-8"/> demo6-tempt type = "text/javascript" src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <h2> Участники </h2> Вот участники: <div data-bind = strate: aTemptate: foreach: People} "> </div> <script type =" text/html "id =" persontemplate "> <h3 data-bind =" text: name "> </h3> <p> возраст: <span data-bind =" text: age "> </span> </p> </script> <script type =" text/javascript "> function myViewmod () 'Tommy', возраст: 27}, {name: 'frank', возраст: 33}]; } ko.applybindings (new myviewmodel ()); </script> </body> </html>Для получения дополнительной информации об использовании шаблонов, пожалуйста, обратитесь к официальной документации: http://knockoutjs.com/documentation/template-binding.html. В этой статье перечислены только использование шаблонов в 2.
6. Резюме
На этом этапе содержание быстрого начала nockoutjs закончилось. Мы продолжим представлять вам контент KO в следующей статье. Содержание следующей статьи представит, как использовать KO для создания фактического проекта. Не пропустите это.