이전 Knockoutjs Learning Series (i) KO의 첫 번째 경험 기사에서 KO의 데이터-결합 = "xx : oo"바인딩 방법은 텍스트, 값 등을 바인딩 할 수있을뿐만 아니라 눈에 띄는 스타일 및 기타 외관 속성, 클릭, 텍스트 및 기타 이벤트 및 제어 프로그램 흐름을 바인딩 할 수 있다고 언급되었습니다. 다양한 멋진 번들이 분명히 당신의 환상을 만족시킬 것입니다.
다음은 다양한 바인딩의 사용에 대해 간략하게 설명하며, 이는 주로 바인딩 속성에 따른 표현, 프로세스 및 상호 작용의 세 가지 유형으로 나뉩니다.
성능 속성
프레젠테이션 클래스의 바인딩 속성에는 가시, 텍스트, HTML, CSS, 스타일 및 attr가 포함됩니다. CSS가 CSS를 대표하는 클래스를 제외하고는 다른 모든 것을 이해하기 쉽습니다. 물론 스타일의 이름 지정은 JS와 일치해야하며 아래와 같이 낙타 이름 지정으로 변경해야합니다.
<!-html code-> <div data-bind = "Visible : whistShowMessage"> 당신은 "mishwowmessage"가 진정한 값을 보유 할 때만이 메시지를 볼 수 있습니다. </div> <div> 오늘의 메시지는 다음과 같습니다. ProfitWarning : CurrentProfit () <0} "> CSS 클래스 바인딩 테스트 </div> <div data-bind ="style : {currentProfit () <0? {whowmessage : ko.observable (true), // 초기 메시지 visiblemymessage : ko.observable (), // 초기에 blankdetails : ko.observable (), // 처음에 blankcurrentprofit : ko.observable (150000), // 긍정적 인 가치는 초기에 Classwerning "을 적용하지 않습니다. ko.observable (150000), // 긍정적 값, 따라서 처음에는 blackUrl : ko.observable ( "Year-end.html"), urltitle : ko.observable ( "최종 연말 통계를 포함한 보고서")}; ko.applybindings (viewmodel); // 바인드를 적용합니다효과는 다음과 같습니다.
이전 기사에서 언급했듯이 XXOO의 개별 속성 외에도 JSON 객체를 전달할 수도 있습니다. 즉, 다음과 같은 바인딩 속성을 결합 할 수 있습니다.
<!-html code-> <div data-bind = "{가시 : thiteShowMessage, text : myMessage, css : {leactwarning : currentProfit () <0}}"> "thilthshowmessage"가 실제 값을 보유 할 때만이 메시지를 볼 수 있습니다. </div.물론 효과는 다음과 같습니다.
프레젠테이션 클래스의 설정은 비교적 간단합니다. 한 가지 주목할 점은 많은 프리젠 테이션 클래스를 동적으로 변경할 필요가 없다는 것입니다. 현재 뷰 모델 설정을 사용하여 데이터의 중앙 집중식 초기화를 달성 할 수 있지만 다음과 같은 관찰 가능로 설정하지는 않습니다.
// js codevar viewmodel = {throudshowmessage : ko.observable (true), // 처음에 visiblemymessage : '이 텍스트는 동적 업데이트가 필요하지 않습니다'// 처음 비워};프로세스 클래스 속성
프로세스 클래스에는 IF, IFNOT,보다 고급 "구성 요소"바인딩이 포함됩니다. IF가 보이는 것과 유사한 경우. 차이점은 다음과 같습니다. DOM에서 해당 구성 요소를 직접 제거하는 반면, 보이는 HIDDEN 디스플레이 만 제어하고 구성 요소는 여전히 DOM에 있습니다. with는 스코프 체인을 확장하는 JS와 동일한 효과를 갖습니다. 간단히 말해서, '접두사'를 추가하는 것입니다. 변수 전에. 여기에 Foreach 만 소개하고 구성 요소는 템플릿 바인딩과 함께 배치됩니다.
코드를 확인하십시오.
<!-HTML 코드-> <p> Test foreach binding test </p> <ul data-bind = "foreach : people"> <li> No. <텍스트 : $ index "> </span> people의 이름 : <span data-bind ="text : name "> </span> <a href ="#"data-bind ="click : $ parent.removepople "> removepeople". href = "#"data-bind = "click : remove"> 제거 "> 제거 </a> </li> </ul> <입력 유형 ="버튼 "data-bind ="클릭 : addPeople "value ="add "/> var listModel = function () {// People Array의 값을 설정합니다 (People은 실제로 함수 배열입니다). 배열 객체를 가로 지르기 위해 Foreach를 사용하십시오. // ul, Li는 사람들과 사람들의 아이들에 해당합니다. 따라서 내부적으로 Li를 바인딩 할 때 범위는 People Child {Name ...}에 있습니다. removepeople 이외의 사람들을 호출하기 위해서는 $ 부모가 필요합니다. // 내부적으로 제거라고 불리는 경우, remove in reamp. this.people = ko.observablearray ([{name : "mark zake", remove : function () {that.people.remove (this); // 현재 객체 ({name ...}) 및 범위에 주목하십시오. {that.people.remove (this);}}, {name : "green deny", remove : function () {that.people.remove (this);}}]); 이것은 변경 될 것이며, 이것은 미리 저장하고 전달되어야합니다. var = that = this; this.addpeople = function () {that.people.push ({name : new date (). todatestring (), remove : function () {that.people.remove (this);}};}; 실행하려는 것은 ListModel.people.remove (a.parent) this.removepeople = function () {that.people.remove (this);}}; ko.applyBindings (new listModel ())입니다.여기서 엉망이되는 것은 DOM 노드와 뷰 모델 사이의 계층 적 통신입니다. 먼저, ul에 대한 교도소 바인딩을 적용합니다. 즉, 각 Li는 각 사람의 자녀에 해당합니다. 이에 해당하면 JS의 범위 규칙에 따라 이해할 수 있습니다. 범위에 대해 말하면, 나는 이것을 언급해야한다. 말이 진행됨에 따라, 나는 이것을 나의 첫사랑 인 것처럼 취급하며, 이것은 수천 번이나 속임수를 썼습니다. 여기에서 Xiaojia는 공식 버전에 제거 기능을 추가했는데, 이는 공식 remobpeople에 해당하는 것이 간단합니다. $ index 및 $ parent와 같은 변수는 문자 그대로 이해하십시오.
상호 작용 클래스 속성
마지막으로, 요점을 얻을 시간입니다. KO를 사용하는 가장 중요한 이유는 동적 대화 형 UI 프리젠 테이션 문제를 다루는 것입니다. 여기서 우리는 양식과 관련된 바인딩을 소개합니다.
(1) 바인딩을 클릭하십시오
구문 : data-bind = "클릭 : 클릭 핸들러". 여기에서 클릭 핸들러 함수는 참조 할 수있는 한 뷰 모델의 함수 일 필요는없는 기능 일 수 있습니다. 클릭 이벤트에 대한 몇 가지 사항이 있습니다.
1. 매개 변수 패스, KO는 기본적으로 현재 구성 요소를 첫 번째 매개 변수로 전달하는 구성 요소로 전달합니다. 현재 바인딩 컨텍스트에주의하십시오. 예를 들어, 환경과 함께 반환 된 구성 요소는 원하는 현재 구성 요소 대신 구성 요소가됩니다. 이벤트 매개 변수를 전달 해야하는 경우 이벤트를 두 번째 매개 변수로 전달하십시오. 더 많은 매개 변수를 전달 해야하는 경우 기능으로 래핑해야합니다. 좋다:
<button data-bind = "클릭 : 함수 (data, event) {myFunction ( 'param1', 'param2', data, event)}"> 클릭 </button>2. 기본 동작 설정 (예 : 링크)
KO는 기본 이벤트 동작에 의해 금지되며, 일반적으로 링크의 클릭 이벤트를 바인딩하며 점프하지 못하게합니다. 그러나 활성화 해야하는 경우 ClickHandler에서 True를 반환하십시오.
3. 거품
KO는 기본적으로 거품을 허용합니다. Data-Bind = "Click : ClickHandler, ClickBubble : False"로 클릭 이벤트를 버블로 설정할 수 있습니다.
(2) 이벤트 바인딩
KO는 사용자가 바인딩 이벤트를 사용자 정의 할 수 있도록이 인터페이스를 제공합니다. 매개 변수 전달, 기본 동작, 버블 링 등, 클릭 바인딩과 동일, 사용 사례와 관련하여 :
<div> <div data-bind = "event : {mouseover : enabledetails, mouseout : disabledetails}"> mouse </div> <div data-bind = "visible : indecribled"> 세부 사항 </div> </div> <script type = "text/javaScript"> var viewModel = {ko.observable (found) : endevervely (endevervely) : {this.detailSenabled (true);}, disabledetails : function () {this.detailsEnabled (false);}}; ko.applybindings (viewModel); </script>(3) 제출 한 바인딩
주로 검증 양식 작업을 수행하는 데 사용됩니다. KO는 기본 제출 양식 조치를 차단하고 제출 한도 기능으로 전송합니다. 미래에 제출 해야하는 경우 바인딩 이벤트에서 True를 반환하십시오.
추신 : 양식의 클릭 이벤트를 사용하여 처리하지 않는 이유는 무엇입니까? 제출은 원래 제출 이벤트를 처리하도록 설계되었으므로 캐리지 리턴과 같은 제출 작업을 수락 할 수도 있지만 클릭 할 수 없습니다.
(4) 값은 TextInput에 바인딩됩니다
입력 상자의 바인딩 값과 텍스트는 비슷해 보이지만 TextInput은 입력 이벤트를 처리하는 데 특별히 사용되는 새로운 것이기 때문에 바인딩에 텍스트를 사용하는 것이 좋습니다. 이전 기사에서 볼 수 있듯이 값 바인딩 (왼쪽) 입력을 사용할 때는 업데이트되기 전에 입력 상자 밖으로 이동해야하며 TextInput (오른쪽)은 즉시 업데이트됩니다.
값 바인딩은 데이터-결합 = "{value : price, valueUpdate : 'afterKeydown'}을 설정하여 TextInput과 동일한 효과를 달성 할 수 있지만 브라우저에서 TextInput과 호환되지 않습니다.
(5) 옵션 바인딩 (selectedOptions)
드롭 다운 목록에서 옵션을 사용하여 아동의 가치를 바인딩 할 수 있습니다. 아이는 끈이거나 js 객체 일 수 있습니다. 이전 기사 ([Knockoutjs Learning Experience Journey] (1) KO 첫 경험)는 문자열을 보여 주며 이번에는 물체를 전달합니다.
암호:
<p> 귀하의 국가 : <옵션 : 옵션 : availableCountries, appebleCountries, 'countryName', value : selectedCountry, 옵션 커밋 : '선택 ...' "> </select> </p> <div data-bind ="visible : selectedCountry "> <!-인구를 선택할 때-> 텍스트를 선택한 국가를 선택했습니다. selectedCountry (). CountryPopulation : '알 수없는' "> </span>. ko.observablearray ([New Country ( "UK", 65000000), New Country ( "USA", 320000000), New Country ( "Sweden", 29000000)]), SelectedCountry : ko.Observable () // default}; ko.applybindings (viewmodel);
다음은 목록 상자 옵션을 바인딩하는 옵션이며 값은 선택한 항목을 바인딩하는 데 사용됩니다. 옵션은 JS 객체이므로 옵션 텍스트를 사용하여 목록 상자에 표시를 지정해야합니다. 옵션 커넥션은 항목이 선택되지 않은 경우 기본 표시 값을 나타냅니다. 다중 선택 목록 상자를 설정하면 값을 사용하여 선택한 항목을 바인딩 할 수 없습니다. 현재 선택한 항목을 바인딩하는 데 SelectOptions를 사용해야합니다.
(6) 기타 바인딩 : 활성화/비활성화, hasfocus, 확인, 고유 한.
이 이벤트는 사용하기가 매우 간단하므로 자세히 소개하지 않습니다. 마지막 고유 이름은 양식 컨트롤의 고유 한 이름 속성을 설정하는 데 사용됩니다. 양식이 배경에 제출되면 이름 속성의 값을 설정하지 않고 배경에 제출되지 않으므로 바인딩 기능이 있습니다. 공식 웹 사이트에서 Hasfoucus에 대한 또 다른 일반적인 영향이 있습니다.
이름:
이름 : Bert Bertington
이름을 클릭하여 편집하십시오. 변경 사항을 적용하려면 다른 곳을 클릭하십시오.
위의 이름을 클릭하면 편집 할 수있는 다음 집중력을 잃은 다음 일반 텍스트가 될 수 있습니다. 이 효과는 KO와 함께 구현하기가 매우 간단합니다.
요약
이 기사는 주로 Knockoutjs에서 다양한 바인딩의 사용 방법을 소개합니다. 이러한 바인딩 방법의 조합을 사용하여보다 역동적 인 상호 작용이 필요한 UI 페이지를 만들 수 있습니다. 이러한 방법을 사용하는 가장 중요한 것은 모든 바인딩이 기능 객체라는 것을 기억하는 것입니다. 따라서 HTML에서 직접 작동 할 수 있으므로 JS 코드 구조가 더 간단 할 수 있습니다.
공식 자습서 : http://knockoutjs.com/documentation/introduction.html