Bootstrap은 프론트 엔드 프레임 워크이며 웹 개발자를 자유롭게하는 데 좋은 것입니다. UI는 매우 고급, 대기 및 고급임을 보여줍니다. 이론적으로는 CSS 라인을 쓸 필요가 없습니다. 태그에 적절한 속성을 추가하십시오.
Knockoutjs는 JavaScript에서 구현 된 MVVM 프레임 워크입니다. 매우 좋은. 예를 들어, 목록 데이터 항목을 추가하거나 줄인 후에 전체 컨트롤 조각을 새로 고치거나 JS 추가 및 삭제 노드를 직접 작성할 필요가 없습니다. 구문 정의를 충족하는 템플릿과 속성 만 정의하십시오. 간단히 말해서, 우리는 데이터에 대한 액세스에만주의를 기울이면됩니다.
1. Knockout.js 소개
1. Knockout.js 및 MVVM
요즘에는 다양한 프론트 엔드 프레임 워크가 압도적이고 눈부신 것입니다. 때로는 프로그래머가 정말 힘들어서 배울 수있는 항상 끝없는 기술이 있다는 한숨을 쉬어야합니다. 당신이 변신하지 않는 한 언제 끝날 것인가! 고통의 바다는 무한하며, 되돌아 보면 해안인지 여부는 당신에게 달려 있습니다!
Knockout.js는 MVVM 모드를 기반으로 한 가벼운 프론트 엔드 프레임 워크입니다. 얼마나 가볍습니까? 공식 웹 사이트에 표시된 최신 버전 v3.4.0에 따르면 22KB에 불과합니다. 데이터 모델과 인터페이스 dom 간의 바인딩을 친숙한 방식으로 처리 할 수 있습니다. 가장 중요한 것은 바인딩이 양방향이라는 것입니다. 즉, 데이터 모델이 변경되면 인터페이스 DOM의 데이터도 그에 따라 변경됩니다. 반대로 인터페이스 DOM의 데이터가 변경되면 데이터 모델도 변경됩니다. 이를 통해 프론트 엔드 코드의 양을 크게 줄이고 인터페이스를 쉽게 유지할 수 있으며 더 이상 많은 이벤트 모니터링 데이터 모델 및 인터페이스 DOM 변경 사항을 작성할 필요가 없습니다. 블로거는 아래의 사용 예제를 기반 으로이 두 가지 점을 설명합니다.
Knockout.js 공식 웹 사이트 : http://knockoutjs.com
Knockout.js 오픈 소스 주소 : https://github.com/knockout/knockout
MVVM 모드 : 이것은 사용자 인터페이스를 만들기위한 설계 모델입니다. MVVM은 모델, 뷰 모델, 모델, 모델은 데이터 모델, View는 우리의 뷰이며 ViewModel은 뷰 모델이며, 데이터 모델과보기의 DOM 요소를 바인딩하는 데 사용되는 뷰 모델입니다. WPF와 Silverlight를 사용한 경우 문제를 이해하는 것은 문제가되지 않아야합니다. 그것을 사용하지 않은 것은 문제가되지 않습니다. 이 기사를 읽은 후에는 일반적인 이해가있을 것입니다.
2. 가장 간단한 예
일반적으로 말하면, Knockout.js를 처음부터 사용하는 경우 최소한 다음 네 부분을 수행해야합니다.
2.1. 공식 웹 사이트로 이동하여 Knockout.js 파일을 다운로드 한 다음 뷰 페이지에 인용하십시오.
<스크립트 src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script>
참고 : Knockout.js는 jQuery 지원이 필요하지 않습니다. 프로젝트가 jQuery 관련 작업이 필요한 경우 jQuery를 참조하십시오. 그렇지 않으면 위의 파일 만 참조하십시오.
2.2. ViewModel을 정의하십시오
ViewModel이란 무엇입니까? 실제로 JS에서는 JSON 객체처럼 보입니다. 뷰 모델을 정의합니다.
var myviewModel = {이름 : "lilei", 직업 : "소프트웨어 엔지니어",};2.3. 보기에서 데이터 바인드를 바인딩하는 태그 정의
<div> 이름 : <label data-bind = "text : name"> < /label> <br /> 직업 : <input type = "text"data-bind = "textInput : 직업" /> < /div>
참고 : 입력 태그에 해당하는 텍스트에는 텍스트가 필요하며 일반 태그의 텍스트는 필요합니다.
2.4. 바인딩을 활성화하십시오
위의 세 단계를 수행 한 후에는 녹아웃의 바인딩도 활성화해야합니다.
ko.applybindings (myViewModel);
이 네 부분을 수행함으로써 가장 간단한 뷰 모델 데이터 바인딩이 기본적으로 구현됩니다. 효과를 얻으십시오 :
충분히 조심하면 KO.AppLyBindings () 메소드에 두 개의 매개 변수가 있음을 알 수 있습니다. 첫 번째는 우리가 바인딩 해야하는 뷰 모델이며 두 번째는 무엇입니까? KO.AppLyBindings (MyViewModel)에서; 두 번째 매개 변수는 옵션 매개 변수이며,이 매개 변수는 뷰 모델에 바인딩되는 태그의 범위를 나타냅니다. 예를 들어 위 코드를 변경하겠습니다.
<div> 이름 : <label id = "lb_name"data-bind = "text : name"> < /label> <br /> 직업 : <input type = "text"data-bind = "textinput : profession" /> < /div> ko.applybindings (myViewModel, document.getElementById ( "lb_name");
결과를 얻으십시오 :
이것으로부터 우리는 두 번째 매개 변수가 myViewModel의 동작 범위를 정의한다는 것을 알 수 있습니다. 두 번째 매개 변수가 div와 같은 컨테이너 레이블 인 경우, 바인딩의 범위는 모두 div 아래의 하위 라벨임을 의미합니다.
3. 모니터링 속성
위의 네 단계로, 우리는 어떤 효과도 볼 수 없습니다. 우리가 보는 것은 JSON 객체의 데이터를 HTML 태그에 바인딩하는 것 이상입니다. 이것을하는 요점은 무엇입니까? 간단한 문제를 복잡하게하지 않습니까? 걱정하지 마세요, 기적을 바로 목격하십시오! 위에서 언급했듯이 녹아웃의 가장 중요한 중요성은 양방향 결합에 있습니다. 그렇다면 양방향 바인딩을 달성하는 방법은 무엇입니까? 답은 속성을 모니터링하는 것입니다.
녹아웃에는 핵심에 세 가지 모니터링 속성이 있습니다 : 관찰 가능, 종속 조항, 관측형. 관찰의 의미는 관찰 및 관찰로 번역됩니다. 관찰 속성 또는 관찰 속성이라고 말하는 것이 부적절하다고 느끼면 당분간 모니터링 속성이라고합니다.
3.1. 관찰 정보 : 모니터링 속성
위의 예를 이것으로 변경합시다.
<head> <meta name = "viewport"content = "width = device-width"/> <title> index3 </title> <script src = "~/scripts/jquery-1.9.1.min.js"> </script> <script src = "~/scripts/scripts/knockout-3.4.0.min.js"> <scrip> <diSp> <lade : data-bind = "text : name"> </label> <br/> 직업 : <input type = "text"data-bind = "textinput : profession"/> </div> <입력 유형 = "text"id = "txt_testobservable"/> </div> <script type = "text/javascript"> // 1.define viewmodelvar myvmovelel el : ko.observable ( "lilei"), 직업 : "소프트웨어 엔지니어",}; // 2. 바인딩 ko.applybindings (myViewModel); $ (function () {register textChange event $ ( "#txt_testObservable"). on ( "input", function () {myviewModel.Name ($ (this) .val ());}); </body> </body> </body>를 활성화합니다.이 문장의 의미는 뷰 모델의 이름 속성을 모니터링 속성에 추가하는 것입니다. 이름 속성은 모니터링 속성이되어야합니다. 마법의 일이 일어날 것입니다. MyViewModel을 작성할 때 살펴 보겠습니다. :
이름은 원래 속성에서 메소드로 변경되었습니다. 따라서 이름의 값과 할당은 myViewModel.name ()을 사용하여 처리해야합니다. 효과를 살펴 보겠습니다.
코드 의심 : myViewModel.name ($ (this) .val ()); 이 문장은 현재 텍스트 상자의 값을 이름 속성에 할당합니다. 인터페이스는 이름 속성을 바인딩하므로 레이블의 값도 그에 따라 변경됩니다. 또는 TextChange 이벤트를 사용하여 수행 할 수 있다고 말합니다. 현재 텍스트 상자의 값이 레이블 태그에 할당되는 한,이 효과는 달성 될 수 있습니다. 실제로, 당신의 쓰기 방법은 또한 목적을 달성 할 수 있지만, 모니터링 속성의 중요성은 이름 값이 어디에서나 변경되면 모든 장소에서 레이블 태그에 값을 할당하지 않고 그에 따라 인터페이스가 변경된다는 것입니다. JS에서는 myViewModel.name ()에만 집중하면됩니다. 아주 굉장하지 않습니까 ~~
3.2. 부양원 서비스 : 의존성 속성을 모니터링합니다
위의 모니터링 속성을 읽은 경우 아직 만족하지 않습니까? 모니터링 종속성 속성의 사용을 살펴 보겠습니다.
코드를 변경하고 살펴 보겠습니다.
<head> <meta name = "viewport"content = "width = device-width"/> <title> index3 </title> <script src = "~/scripts/jquery-1.9.1.min.js"> </script> <script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script> </script> </script> </script> </script> <입력 유형 = "text"data-bind = "textInput : name" /> <br /> 직업 : <입력 유형 = "text"data-bind = "textInput :"textInput : <label data-bind = "text : des"> < /div> <script type = "text /javaScript"> 1.definition viewmodelvar myviewmodel var myviewmodel var myviewmodelvar. ko.observable ( "lilei"), 직업 : ko.observable ( "Software Engineer"),}; myViewModel.des = ko.dependentObservable (function () {return "i name" -" + myViewModel.Name () +", Occupation- " + myViewModel.proffoftion (); // 2. 바인딩 ko.applybindings (myViewModel); </script> </body>를 활성화하십시오효과를 살펴 보겠습니다.
코드 의심 : 모니터링 종속성 속성 KO.dependentObservable ()을 추가하면 DES 속성의 값을 동시에 이름과 교수의 변경 사항으로 모니터링 할 수 있습니다. 그들 중 하나가 변경되면 Des-Bound 태그가 변경을 유발합니다. 이것의 가장 큰 장점은 JS가 DOM을 작동시키는 데 어려움을 피하는 것입니다.
3.3. 전망대; 모니터 어레이
위의 두 가지 외에도 KO는 배열 객체의 모니터링도 지원합니다. 예를 살펴 보겠습니다.
<head> <meta name = "viewport"content = "width = device-width"/> <title> index3 </title> <script src = "~/scripts/jquery-1.9.1.min.js"> </script> <script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script> <script> <script> data-bind = "옵션 : deptarr, 옵션 설명 : 'name'"> </select> </div> <div> <input type = "text"id = "txt_testobservable"/> <input type = "id ="btn_test "value ="new Department "/> </div> <script type ="text/javascript "> ID : 1, 이름 : 'R & D Department'}, {id : 2, name : '관리 부서'}, {id : 3, name : 'human affairs department'}); var viewmodel = {deptarr : deptarr,}; ko.applybindings (var i = 4; $ (function () {btn _ on ( ") {deptarr.push ({id : i ++, name : $ ( "#txt_testobservable"). val ()});});}); </script> </body>효과를 확인하십시오.
코드 의심 : 위의 방법 ko.observablearray ()는 배열 객체의 모니터링을 추가합니다. 즉, 배열 변경이 Deptarr 어레이 객체로 변경되는 한 JS의 어느 곳에서나 UI가 해당 제품을 제공하도록 트리거됩니다. 한 가지 주목할 점은 모니터링 어레이는 실제로 모니터링 된 배열 객체 자체이며 배열 객체의 하위 객체 속성의 변경에 대해서는 모니터링 할 수 없다는 것입니다. 예를 들어 클릭 이벤트를 다음과 같이 변경합니다.
$ (function () {$ ( "#btn_test"). on ( "click", function () {deptarr [1] .name = "aaa";});});효과:
이는 배열 모니터링이 실제로 배열 객체 자체를 모니터링하며 배열의 요소 속성의 변경 사항을 모니터링하지 않음을 보여줍니다. 데이터에서 객체의 특성 변경을 모니터링 해야하는 경우 데이터의 개체 속성에 ko.observable ()을 사용해야하며 두 개는 함께 사용됩니다. 관심이 있으시면 시도해 볼 수 있습니다.
4. KO의 공통 데이터 바인드 속성
위에서, 우리는 여러 데이터 바인드 속성을 사용했는데, 그러한 데이터 바인드 속성은 몇 개나 녹아웃에 있습니까? 여기서 우리는 일반적으로 사용되는 속성을 나열합니다.
4.1. 텍스트 및 입력 텍스트
이름에서 알 수 있듯이 텍스트는 텍스트를 의미합니다. 이 바인딩 속성은 일반적으로 <label>, <span>, <div> 등과 같은 태그가있는 텍스트를 표시하는 데 일반적으로 사용됩니다. 물론 원하는 경우이 바인딩은 모든 태그에 사용할 수 있습니다. 기본적으로 사용하는 것에 대해 말할 것이 없습니다. ko.observable ()을 사용하지 않으면 정적 바인딩이므로 동적 결합입니다.
입력 태그의 텍스트 인 입력 텍스트는 입력 태그의 값 속성과 동일합니다.
<div> 이름 : <label data-bind = "text : name"> </label> <br/> 직업 : <input type = "text"data-bind = "textInput : profession"/> </div> //1.define ViewModelVar myviewModel = {이름 : KO.Observable ( "lilei"), 소프트웨어 엔지니어 : "소프트웨어 엔지니어", // 2. 바인딩 ko.applybindings (myViewModel)를 활성화합니다.4.2. 값
이 바인딩 속성은 일반적으로 입력 태그에 사용되며 기본적으로 위의 입력 텍스트와 유사합니다. 그러나 값은보다 표준화됩니다.
값과 함께 사용되는 파라미터 valueUpdate는 값이 업데이트 될 때 인터페이스가 수행하는 작업을 나타냅니다. ValueUpdate의 주요 값에는 Change/keyup/keypress/afterkeydown 등이 포함됩니다. 텍스트가 변경 될 때 값에 해당하는 뷰 모델의 값을 나타냅니다.
이름 : <입력 유형 = "text"data-bind = "value : name, valueUpdate : 'keyup'" /> <br /> var myViewModel = {이름 : ko.observable ( "lilei"),}; // 2. 바인딩 ko.applybindings (myViewModel)를 활성화합니다.위의 코드는 텍스트 상자의 값 속성과 MyViewModel의 이름 속성이 키보드가 닫히면 업데이트되었음을 나타냅니다.
4.3. 확인
점검 된 바인딩은 일반적으로 확인란, 라디오 및 선택할 수있는 기타 양식 요소에 사용되며 해당 값은 BOOL 유형입니다. 가치 사용은 기본적으로 유사하므로 반복하지 않습니다.
4.4. ~할 수 있게 하다
활성화 바인딩은 일반적으로 레이블 요소를 활성화하는 데 사용되며 일반적으로 형태 요소를 활성화하고 비활성화하는 데 사용됩니다. 비활성화와 달리 해당 값도 Bool 유형입니다.
<div> <입력 유형 = "text"data-bind = "enable : ismen"/> </div> <script type = "text/javaScript"> // 1. define viewModelVar myViewModel = {name : ko.observable ( "lilei"), 직업 : ko.observable ( "소프트웨어 엔지니어") ko.observable (40), Ismen : Ko.Observable (true)}; // 2. 바인딩 ko.applybindings (myViewModel); myViewModel.ismen (false); </script>를 활성화하십시오ISMEN 속성이 거짓이되므로 해당 모든 텍스트 상자에 비활성화 된 상태가 표시됩니다.
4.5. 장애가 있는
활성화와 달리 사용법은 활성화와 유사합니다.
4.6. 옵션
위에서, 선택 태그의 옵션 세트를 나타내는 선택 바인딩을 사용할 때 옵션이 사용되었으며, 해당 값은이 드롭 다운 상자의 데이터 소스를 나타내는 배열입니다. 이 데이터 소스의 모니터링은 ObservableArray를 사용하여 활성화 할 수 있습니다. 사용법은 위를 참조하십시오.
4.7.html
텍스트 바인딩은 실제로 태그 내부 텍스트의 설정과 값입니다. 마찬가지로, HTML 결합은 또한 InnerHTML의 설정 및 값이다. 해당 값은 HTML 태그입니다.
4.8. CSS
CSS 바인딩은 DOM 요소에 하나 이상의 스타일 (클래스)을 추가하거나 제거하는 것입니다. 형식 사용 :
<style type = "text/css">. testbold {back 엔지니어 "), 나이 : KO.Observable (40)};이 div는 배경색을 표시합니다.
여러 스타일을 추가하거나 제거 해야하는 경우 예를 들어 다음과 같이 약간 변경하십시오.
<div data-bind = "css : {testbold : myviewmodel.name () == 'lilei', testborder : myviewmodel.profession () == 'php 엔지니어'}"> aaaa </div>4.9. 스타일
CSS 바인딩의 기능이 클래스 스타일을 태그에 동적으로 추가하거나 제거하는 경우 스타일 바인딩의 기능은 태그에 특정 스타일을 동적으로 추가하거나 제거하는 것입니다. 예를 들어:
<div data-bind = "css : {back여러 가지를 추가하거나 제거하는 경우 CSS 바인딩 사용 방법
4.10, attr
attr 바인딩은 주로 태그에 하나 이상의 특성 (사용자 지정 속성 포함)을 추가하고 제거하는 데 사용되며 CSS와 유사합니다.
4.11. 딸깍 하는 소리
바인딩을 클릭하면 해당 DOM 요소에 클릭 이벤트 실행 방법을 추가하는 것을 의미합니다. 모든 요소에서 사용할 수 있습니다.
<div> <입력 유형 = "버튼"value = "테스트 클릭 바인딩"data-bind = "click : clickfunc" /> < /div> var myviewmodel = {clickfunc : function () {alert ($ (event.currentTarget);};}}; ko.applybindings (myviewModel);event.currentTarget은 현재 클릭 한 DOM 요소를 나타냅니다. 때로는 단순화를 위해 익명 기능을 직접 사용하여 바인딩합니다.
<div> <입력 유형 = "버튼"value = "테스트 클릭 바인딩"Data-Bind = "클릭 : function () {alert ( 'clicked');}" /> < /div>그러나 이러한 방식으로 JS를 HTML로 작성하면 블로거가 수락하기가 어렵고, 특히 클릭 이벤트의 논리가 약간 복잡 할 때 유지하기가 비교적 불편하다고 생각합니다. 따라서 필요하지 않은 경우이 익명 기능을 직접 작성하는 것이 좋습니다.
4.12. 기타
데이터 바인드의 모든 바인딩에 대해서는 공식 웹 사이트의 소개를 볼 수 있으며 여기에 하나씩 나열하지는 않습니다. 필요할 때 공식 웹 사이트로 이동하여 확인하십시오. 공식 웹 사이트에 나열된 모든 바인딩을 살펴보십시오.
5. JSON 객체와 모니터링 속성 간의 변환 및 관계
우리는 다른 언어로 된 직접 프리젠 테이션 방법을 피하기 위해 일반적으로 프론트 엔드 및 백엔드와 상호 작용할 때 JSON 형식 데이터를 사용한다는 것을 알고 있습니다. HTTP 요청을 통해 백엔드에서 검색된 데이터 모델을 사용합니다. KO의 일부 기능을 사용하려면 이러한 일반 데이터 모델을 KO의 모니터링 속성으로 변환해야합니다. 반대로 KO의 모니터링 속성을 사용하며 때로는 이러한 속성을 일반 JSON 데이터로 변환하여 배경으로 전달해야합니다. 그렇다면이 변환을 달성하는 방법은 무엇입니까?
5.1. JSON 객체를 ViewModel로 변환합니다
예를 들어, 우리는 배경에서 JSON 객체를 가져온 다음 뷰 모델로 바꾸고 인터페이스 dom에 바인딩합니다.
$ .ajax ({url : "/home/getdata", type : "get", data : {}, success : function (data, status) {var ojson = data;}});우리는 백엔드에 요청을 보내고 JSON 객체를 가져 가서 값을 OJSON에 할당 한 다음 OJSON을 ViewModel로 변환합니다. 가장 직관적 인 방법은 수동으로 변환하는 것입니다. 예를 들어, 우리는 이것을 할 수 있습니다.
var myviewmodeljson = {deptname : ko.observable (), deptlevel : ko.observable (), deptdesc : ko.observable ()}; ko.applybindings (myviewmodeljson);그런 다음 Ajax가 요청한 성공
성공 : 함수 (data, status) {var ojson = data; myViewModeljson.deptName (ojson.deptname); myViewModelJson.DepTlevel (ojson.detplevel); myViewModeljson.deptDesc (ojson.deptdesc);};이러한 방식으로, 수동 바인딩을 통해, viewmodel에 대한 JSON 물체의 결합이 실현된다. 이를 수행하는 장점은 유연성이며, 단점은 분명하며 수동 코드의 양은 너무 큽니다.
다행히도, 우리의 보편적 인 오픈 소스에는 항상 더 나은 방법을 생각해내는 사람들이 있습니다. Knockout.mapping 구성 요소를 사용하여 인터페이스 JSON 객체를 ViewModel로 변환하는 데 도움이됩니다.
녹아웃 오픈 소스 주소 매핑 : 다운로드
어떻게 사용되는지 또는 위의 예를 간단히 살펴 보겠습니다. 우리는 뷰 모델의 정의를 구현할 필요가 없습니다. 먼저 Knockout.mapping.js를 참조해야합니다
<script src = "~/scripts/knockout/knockout-3.4.0.min.js"> </script> <script src = "~/scripts/knockout/extensions/knockout.mapping-latest.js"> </script>
참고 : 여기서 knock.mapping-rastest.js는 녹아웃 -3.4.0.min.js 뒤에 배치해야합니다. 그렇지 않으면 ko.mapping을 호출 할 수 없습니다.
그런 다음 성공 기능에서 직접 사용하십시오
성공 : 함수 (데이터, 상태) {var myviewmodeljson2 = ko.mapping.fromjs (data); ko.applybindings (myviewmodeljson2);}효과를 보자 :
코드 의심 : AJAX 요청을 통해 배경에서 검색된 JSON 객체는 KO.mapping.fromjs ()를 통해 뷰 모델로 편리하게 변환됩니다. 날카 롭지 않니? 물론,이 사용법 외에도 기존 뷰 모델을 업데이트하고 다음과 같이 사용할 수 있습니다.
var myviewmodeljson = {deptname : ko.observable (), deptlevel : ko.observable (), deptdesc : ko.observable ()}; ko.applybindings (myviewmodeljson); $ (function () {$ .ajax (url : getdata : " {}, success : 함수 (data, status) {ko.mapping.fromjs (data, myviewmodeljson)});});성공하면 데이터의 값에 따라 MyViewModeljson의 뷰 모델을 업데이트하십시오.
5.2. ViewModel을 JSON 객체로 변환하십시오
위에서 언급 한 것은 JSON 객체가 ViewModel로 변환되었다고 언급 했으므로 ViewModel을 JSON 객체로 변환하여 백엔드로 전달 해야하는 경우 어떻게해야합니까?
녹아웃에는 두 가지 방법이 있습니다.
• ko.tojs () : viewModel을 JSON 객체로 변환합니다
• ko.tojson () : 뷰 모델을 직렬화 된 JSON 문자열로 변환합니다.
예를 들어, 우리 코드는 다음과 같습니다.
function () {var ojson1 = ko.tojs (myviewmodeljson); var ojson2 = ko.tojson (myviewmodeljson);}); var myviewmodeljson = {deptname : ko.observable ( "r & d department"), deptrevel : ko.ovservable ( "2", "2" ko.observable ( "Development Group")}; ko.applybindings (myviewmodeljson);그런 다음 Ojson1 및 Ojson2의 값을 모니터링 해 봅시다.
코드 의심 : 위의 그림을 통해 두 가지 방법의 차이점을 쉽게 이해할 수 있습니다. 이 두 가지 방법은 KO에 내장되어 있으며 매핑 구성 요소의 지원이 필요하지 않다는 점에 유의해야합니다.
6. 자신만의 데이터 바인드 속성을 만듭니다
나는 위의 많은 것에 대해 이야기했고, 녹아웃에서 바인딩과 모니터링을 소개 할 것입니다. 따라서 때로는 다음과 같은 데이터 바인드를 사용자 정의해야합니다. <label data-bind = "mybind : name"> </label>. 이 요구 사항은 구성 요소를 캡슐화 할 때 특히 유용합니다. 구현할 수 있습니까? 확신하는.
Knockout에서는 데이터 결합 속성을 사용자 정의하기 위해 KO.BindingHandlers 속성이 제공됩니다. 구문은 다음과 같습니다.
ko.bindinghandlers.myselect = {init : 함수 (요소, valueaccessor, allbindingsaccessor, viewmodel) {}, 업데이트 : 함수 (요소, valueaccessor, allbindingsaccessor, viewmodel) {}};이렇게 선언 한 다음 HTML 태그에서 사용자 정의 데이터 바인드를 사용할 수 있습니다.
<div> <data-bind = "mySelect : $ root"> <옵션 id = "1"> R & D 부서 </옵션> <옵션 id = "2"> 휴먼 업무 부서 </옵션> <옵션 id = "3"> 관리 부서 </옵션> </select> </div>
MySelect는 우리의 맞춤형 바인딩 속성입니다. $ 루트는 당분간 초기화로 이해 될 수 있습니다 (이 설명은 엄격하지는 않지만 더 합리적인 설명이 있으면 자유롭게 수정하십시오).
코드 의심 : 위의 KO.BindingHandlers는 단순히 사용자 정의 바인딩 속성을 구현하는 데 사용될 수 있습니다. 두 가지 점을 설명해야합니다.
• 이름에서 알 수 있듯이 Init은 사용자 정의 바인딩을 초기화합니다. 여러 매개 변수가 포함되어 있습니다. 처음 두 매개 변수는 일반적으로 더 자주 사용됩니다. 첫 번째 파라미터는 사용자 정의 바인딩을 초기화하는 DOM 요소를 나타내고, 두 번째 매개 변수는 일반적으로 초기화 된 매개 변수를 전달하는 데 사용됩니다.
• 해당 모니터링 속성이 변경되면이 메소드가 입력됩니다. 콜백이 필요하지 않으면이 방법을 선언 할 수 있습니다.
여기서 블로거는 그가 공유 한 드롭 다운 박스 구성 요소를 기반으로 사용자 정의 바인딩 사용을 간략하게 설명합니다.
6.1. 가장 간단한 방향 선택
일반적으로 KO를 사용하여 일부 일반적인 구성 요소를 캡슐화 해야하는 경우 KO.BindingHandlers를 사용해야합니다. 블로거는 Mutiselect 구성 요소와 함께 사용하는 방법에 대해 논의 할 것입니다.
먼저 사용자 정의 된 ko.bindinghandlers를 선언하고 init 메소드에서 선택 태그를 초기화하십시오.
ko.bindinghandlers.myselect = {init : 함수 (요소, valueaccessor, allbindingsaccessor, viewmodel) {$ (element) .multiSelect ();}, 업데이트 : 함수 (요소, valueAccessor, allbindingsaccessor, viewmodel) {}};그런 다음 페이지 태그에 사용하십시오
<div style = "text-align : center;"> <select data-bind = "mySelect : $ root"> <옵션 id = "1"> R & D 부서 </옵션> <옵션 id = "2"> Human Affairs Department </옵션 ID = "3"> 관리 부서 </옵션> </select> </div>
마지막 세 번째 부분은 바인딩을 활성화합니다
$ (function () {var multiSelect = {}; ko.applyBindings (multiSelect);});매개 변수를 전달할 필요가 없으면 빈 뷰 모델 만 바인딩하면됩니다. 어떤 사람들은 당황하지만 세 번째 부분은 그것이 실용적이라고 생각하지 않습니다. Blogger의 이해는 DOM 요소가 데이터 바인드를 사용하여 데이터 바인딩을 사용해야하며 KO 바인딩을 활성화해야한다는 것입니다.
효과를 얻으십시오 :
6.2. 매개 변수 통과
첫 번째 단계는 KO.BindingHandlers를 사용자 정의하는 것입니다
ko.bindinghandlers.myselect = {init : 함수 (요소, valueaccessor, allbindingsaccessor, viewmodel) {var oparam = valueAccessor (); $ (요소) .multiselect (oparam); update : 함수 (요소, valueAccessor, viewmod in);두 번째 단계는 위와 동일하며 HTML 태그 에서이 사용자 지정 바인딩을 사용하십시오.
3 단계 : 바인딩을 활성화 할 때 매개 변수를 전달합니다
$ (function () {var multiSelect = {enableClickableOptGroups : true, // 붕괴 그룹화 onchange : function (옵션, 확인) {alert ( "select change"); ko.applybindings (multiSect);});이 세 단계를 통해 매개 변수를 Mutiselect의 초기화로 전달할 수 있습니다.
코드 쿼리 : init 이벤트의 두 번째 매개 변수는 주요 기능은 뷰 모델에서 전송 된 매개 변수를 얻는 것이지만 여기서는 메소드로 사용해야합니다. 왜 그렇게 많이 사용 되는가?
2. 추가, 삭제, 수정 및 검색의 첫 번째 예
이 시점에서 기본적인 것들이 마침내 배치되었습니다. 나는 원래 한 기사에서 그것들을 완성 할 계획 이었지만 기본적인 것들이 너무 많이 확장 될 것이라고 기대하지는 않았다! 추가, 삭제, 수정 및 확인의 예는 다음 기사에 포함되어 있습니다. 부트 스트랩 가능 및 Knockoutjs는 결합하여 추가, 삭제, 수정 및 확인의 기능을 실현합니다 [2]. 배우고 의사 소통하는 것을 환영합니다. 물론 추천 할 수 있습니다!