1. 소개
이 일련의 기사는 부트 스트랩을 소개했습니다. 자세한 내용은이 기사를 확인하십시오 : "Bootstrap 소개 튜토리얼". 최근 프로젝트에서 프론트 엔드는 ASP.NET MVC + Knockoutjs + Bootstrap에 의해 만들어집니다. 그래서이 시리즈를 다시 쓰기 시작했습니다. 오늘, Web Front -End -Knockoutjs의 MVVM 프레임 워크를 살펴 보겠습니다.
2. Knockoutjs 란 무엇입니까?
.NET 개발에 종사하는 사람은 MVVM 프레임 워크가 WPF에 통합되어 있음을 알아야하므로 Knockoutjs는 웹 개발을위한 MVVM 프레임 워크이기도합니다. 간단히 말해서, MVVM의 이점은 페이지 디스플레이 코드와 분리되어 프론트 엔드 프로젝트를 더 잘 유지할 수 있습니다.
이전에 웹 페이지를 작성했을 때 JS 코드와 HTML 코드가 함께 혼합되었으며 코드는 많은 DOM 객체로 채워졌습니다. 이 코드 구조는 매우 혼란 스럽습니다. MVVM 프레임 워크를 사용하면 JS 코드 및 HTML 코드를 분할 할 수 있으며 데이터 작동 부분이 더 간단합니다. 해당 구문 (데이터 바인드)을 통해 표시하기 위해 해당 태그 속성에만 결합하면 개발 속도를 높이기 만하면됩니다.
Knockoutjs는 그러한 MVVM 프레임 워크입니다. 실제로 프레임 워크를 호출하는 대신 MVVM 클래스 라이브러리 여야합니다. MVVM 프레임 워크가 없기 때문에 라우팅과 같은 기능을 포함 해야하는 비교적 "무거운"개념입니다. 그러나 녹아웃은 없습니다. 이에 비해 AngularJS는 MVVM 프레임 워크라고 불려야합니다.
Knockoutjs에 의해 구현 된 주요 기능은 다음과 같습니다.
선언 바인딩 : 간단한 구문을 사용하여 모델 데이터를 DOM 요소에 연결하십시오. 즉, "데이터 바인드"구문입니다
종속성 추적 : 변환 및 공동 데이터를위한 모델 데이터 간의 관계를 설정합니다. 예를 들어, 제품의 총 가격은 각 제품 품목의 가격의 합입니다. 현재 제품의 총 가격 및 제품 품목은 종속성 추적 기능을 사용하여 관계를 설정하는 데 사용될 수 있습니다. 즉, 각 상품 항목의 총 가격의 합계에서 파생됩니다. 이 관계는 Knockoutjs의 계산 된 기능에 의해 수행됩니다.
자동 UI 새로 고침 : 모델 상태가 변경되면 UI 인터페이스가 자동으로 업데이트됩니다. 이것은 관찰 가능한 기능에 의해 수행됩니다.
템플릿 : 모델 데이터에 대한 복잡한 중첩 가능한 UI를 신속하게 작성하십시오. WPF의 템플릿 개념과 유사합니다.
다음으로, 우리는 특정 예제를 사용하여 Knockoutjs의 사용을 신속하게 파악합니다.
3. 선언적 결합
Knockoutjs에서 데이터 바인드 구문을 사용하여 모델 데이터를 DOM 요소에 바인딩하는 방법을 살펴 보겠습니다.
1. 일원 결합
<! docType html> <html> <head> <meta name = "viewport"content = "width = device-width"/> <title> demo1- 일방적 인 바인딩 </title> <script type = "text/javaScript"src = "/upload/rs/376/pbcx3e1z/knockout-3.4.0.js". <body> <!-일방적 인 바인딩-> <div> <p> 이름 : <strong data-bind = "text : firstName"> </strong> </p> <p> 성 : <strong data-bind = "text : </strong> </p> <p> 이름 : <입력 데이터-바인드 ="값 : FirstName "/> <p> valestnam : <input data-bind : <input /> </p> </div> <!-이 스크립트는 실제 프로젝트의 해당 JS 파일에 배치 한 다음 스크립트 태그-> <!-JS 코드를 통해 HTML에서 참조해야합니다.이 코드는 비즈니스 로직 부분이며 HTML 코드와 비즈니스 로직을 분리하여 뷰를 더 쉽게 설명합니다. {this.firstname = "Tommy"; this.lastname = "li"; } ko.applyBindings (new ViewModel ()); </script> </body> </html>2. 위의 예는 일원 바인딩 작업 만 완료합니다. 즉, 위의 예에서 입력 태그의 값을 변경하고 초점을 남기면 위의 값이 업데이트되지 않음을 알 수 있습니다. 실제로 Knockoutjs의 자동 업데이트 기능은 자동으로 추가되지 않으며 해당 기능을 지원해야합니다. 이 기능은 관찰 가능한 기능입니다. 양방향 바인딩의 예를 살펴 보겠습니다.
<! docType html> <html> <head> <meta name = "viewport"content = "width = device-width"/> <title> demo2-bi increctional binding </title> <script type = "text/javaScript" SRC = "/업로드/RS/376/PBCX3E1Z/Knockout-3.4.0.js"> </script> </head> <body> <!-양방향 바인딩-> <div> <p> 이름 : <strong data-bind = "text : firstName"> </p> <p> 마지막 이름 : <Strong Data-Bind = "Text : LastName "> </strong> </p> <p> 이름 : <input data-bind ="value : firstName "/> </p> <p> 성 : <input data-bind ="value : lastName "/> </p> </div> <script type ="text/javaScript "> function viewModel (this.firstname = ko. 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-equiv = "content-type"content = "text/html; charset = utf-8"/> demo3-dipt tracking </title hipt> 유형 = "text/javaScript"src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <!-양방향 바인딩-> <div> <p> 첫 번째 이름 : <strong data-bind = "text : <strong 데이터 : <strong data-b> 마지막 이름 "> </strong> </p> <p> 이름 : <입력 데이터-결합 ="value : firstName "/> </p> <p> 성 : <input data-bind ="value : lastName "/</p> <p> 전체 이름 : <strong data-bind ="text : fullName "> Upper </button> </div> <script type = "text/javaScript"> function viewModel () {this.firstName = ko.Observable ( "Tommy"); this.lastname = ko.observable ( "li"); // this.fullName = ko.computed (function () {return this.firstName () + "" + this.lastName ();}, this); // 코드를 통해 관찰 가능한 값을 변경하십시오. }; } ko.applyBindings (new 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> demo4-list </type = " src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <table> <Thead> <td> <td> <td> <td> <td> </td> <tbody data-bind = "foreach : items"> <tr> <td data-bind = "text : product.name"> </td> <td> <옵션 선택 : [1,2,3,4,5,6], 값 : 값 : 금액 "> </select> </td> <td data-bind ="text : </td> <td> <a href = "<a href =" data-bind = "click : $ root.remove"> 제거 </a> </a> </a> </a> </a> </a> </a> </a> }, {이름 : "Xiaomi Note", 가격 : 999}, {이름 : "매크로 노트북", 가격 : 4999}]; // 주문 클래스 함수 order () {var self = this; this.items = ko.observablearray ([새 항목 (제품 [0], 1), 새 항목 (제품 [1], 2)); // 총 주문 가격 this.price = ko.computed (function () {var p = 0; for (var i = 0; i <self.items (). length; i ++) {var item = self.Items () [i]; p+= item.product.price * item.amount ();} return p;}; this.remove = function (item) {self.items.remove (항목); }; this.addcomputer = function () {self.items.push (새 항목 (Products [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 (Knockoutjs의 약어)를 시작하는 것이 매우 쉽다고 생각해야합니다. 구문은 이해하기 쉽기 때문에 KO에서 템플릿 사용을 살펴 보겠습니다.
<! doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> demo5-template 바인딩 </title> </</</</timplation type = "text/javaScript"src = "/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <body> <!-템플릿 바인딩, div의 내용은 persontemplate 템플릿의 태그입니다. <!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- <p>Name: <strong data-bind="text: name"></strong></p> <p>Age: <Strong Data-Bind = "Text : Age"> </strong> </p> </div>-> <div data-bind = "template : 'personTemplate'"> </div> <script id = "personTemplate"type = "text/html"> <p> 이름 : <strong data-bind = "text : </strong> <p> age : <text : <text : age "> </strong> </p> </script> <script type ="text/javaScript "> var viewModel = {name : ko.Observable ( 'tommy'), age : 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"/> demo6-template 바인딩 </</</</</</scrate type = "text/javaScript"src = "http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/knockout-3.4.0.js"> </script> </head> <h2> 참가자 </h2> 여기 참가자 : <div data-bind = ", {name : foreach : people} "> </div> <script type ="text/html "id ="persontemplate "> <h3 data-bind ="text : name "> </h3> <p> age : <span data-bind ="text : age "> </span> </p> </script> <script> <script> <script> <script> <savascript"> function {thisveople " 'Tommy', Age : 27}, {이름 : 'Frank', Age : 33}]; } ko.applyBindings (new MyViewModel ()); </script> </body> </html>템플릿 사용에 대한 자세한 내용은 공식 문서를 참조하십시오 : http://knockoutjs.com/documentation/template-binding.html. 이 기사는 2의 템플릿 사용 만 나열합니다.
6. 요약
이 시점에서 Knockoutjs의 빠른 시작 내용은 끝났습니다. 다음 기사에서 KO 컨텐츠를 계속 소개 할 것입니다. 다음 기사의 내용은 KO를 사용하여 실제 프로젝트를 만드는 방법을 소개합니다. 놓치지 마세요.