초보자 가이드에 대한 안내서 : 1 부

키 테이크 아웃

Knockoutjs는 풍부하고 데스크탑과 같은 웹 UI의 생성을 단순화하는 JavaScript 라이브러리입니다. 데이터 모델을 UI에 연결하여 간단한 양방향 바인딩 메커니즘을 제공하여 쉽게 동기화합니다. Knockout은 MVM (Model-View-View Model) 디자인 패턴을 사용하여 응용 프로그램을 세 부분으로 분할합니다. 응용 프로그램의 데이터를 보유하는 모델, 모델과 뷰 사이의 커넥터 및 통신 레이어 역할을하는보기 및 A 응용 프로그램의 모든 UI 요소를 나타내는보기.

Knockoutjs는 선언적 바인딩, 종속성 추적 및 템플릿의 세 가지 핵심 개념을 기반으로 구축됩니다. 선언 바인딩 UI의 일부를 데이터 모델에 연결합니다. 종속성 추적은 바인딩 및 '관찰 가능'이라는 특수 변수를 사용하여 변경시 모델 데이터와 관련된 모든 부품을 업데이트합니다. 템플릿은 코드를 간단하게 유지하면서 풍부한보기 모델 데이터를 표시하는 데 유용합니다. 관찰 정보는 가입자에게 변경 사항을 알리고 종속성을 자동으로 감지 할 수있는 Knockoutjs에 사용되는 특수 JavaScript 객체입니다. 이를 통해 모델이 변경 될 때마다 DOM을 수동으로 조작 할 필요없이보기가 자동으로 업데이트 될 수 있습니다.

Knockoutjs에 대한 초보자 안내서 : 기본 및 관찰 가능 웹 기술을 다루는 거의 모든 사람들은 jQuery를 알고 있거나 적어도 그것에 대해 들었습니다. 타의 추종을 불허하는 단순성과 간결함은 전 세계 수백만의 웹 개발자의 삶을 훨씬 쉽게 만들어주고 환상적입니다. 불행히도 jQuery는 모든 문제에 대한 해결책이 아닙니다. 문제가 발생하는 더 복잡한 웹 앱을 만들기로 결정하자마자 UI와 데이터를 동적으로 통신하는 쉬운 방법은 없습니다. jQuery가 제공하는 저수준 DOM 조작 및 이벤트 처리로 인해 이는 달성하기가 상당히 어렵습니다. UI와 기본 데이터 모델간에보다 정교한 커뮤니케이션 방식을 제공하는 라이브러리가 필요합니다. 그리고 여기에 녹아웃이 들어오는 곳이 있습니다. 녹아웃은 풍부하고 데스크탑과 같은 웹 UI를 만드는 데 도움이되는 JavaScript 라이브러리입니다. 사용자 상호 작용을 단순화하고 인터페이스를 모든 데이터 소스 변경에 완전히 응답합니다. 녹아웃은 데이터 모델을 UI에 연결하는 간단한 양방향 바인딩 메커니즘을 제공하여 산들 바람을 동기화합니다. jQuery와 동시에 녹아웃을 사용해야하지만 애니메이션 전환과 같은 경우에는 녹아웃 자체가 의존하지 않습니다. 당신이 이해해야 할 또 다른 것은 녹아웃이 jQuery와 경쟁하지 않는다는 것입니다. 둘 다 훌륭한 일을합니다. 각각의 방향으로. 당신이 가장 많은 혜택을 얻고 싶은지 알 수 있듯이 함께 사용해야합니다.

이 튜토리얼에서는 녹아웃의 핵심 개념과 기능으로 시작합니다. 2 부에서는 내장 된 바인딩과 사용 방법을 더 깊이 탐색 할 것입니다. 그리고 피날레에서는 확장 된 관측 가능성 및 고유 한 맞춤형 바인딩을 만드는 방법과 같은 고급 기능과 기술을 살펴 보겠습니다. 시작합시다! 기본 개념 코드 예제를 살펴보기 전에 먼저 몇 가지 기본 개념을 파악해야 할 수도 있습니다. 녹아웃은 JavaScript의 MVVM (Model-View-View Model) 디자인 패턴을 구현합니다. 이 패턴에서는 응용 프로그램이 세 부분으로 나뉩니다. 응용 프로그램의 데이터를 보유하는 모델. 이것은 사용자가 입력 한 데이터 또는 웹 서버에서 가져온 JSON 데이터 일 수 있습니다. 모델과 뷰 사이의 커넥터 및 통신 계층 역할을하는보기. 이 데이터를 조작하기위한 데이터 및 작업을 보유하고 UI에 표시합니다. 데이터 모델이 변경 될 때마다 이러한 변경 사항을 반영하여 UI 부품 업데이트에 해당합니다. 응용 프로그램의 모델보기는 JavaScript 코드로 표시됩니다. 응용 프로그램의 모든 UI 요소를 나타내는보기. 주어진 UI의 구조와 외관의 표현입니다. 이보기는 데이터를 표시하고 사용자 입력을 수락하는 데 도움이됩니다. 보기는 응용 프로그램에서 HTML/CSS 코드로 표시됩니다 그들은 녹아웃에 대한 세 가지 핵심 개념입니다

1. 선언 적 바인딩 :이를 통해 UI의 일부를 간단하고 편리한 방식으로 데이터 모델에 연결할 수 있습니다. javaScript를 직접 사용하여 DOM을 조작하면 나중에 DOM 계층 또는 요소 ID를 변경하면 코드가 깨질 수 있습니다. DOM을 변경하더라도 선언적 바인딩을 사용하면 모든 바운드 조각이 연결되어 있습니다. 단순히 DOM 요소에 데이터 바인드 속성을 포함하여 DOM에 데이터를 바인딩 할 수 있습니다.

2. 종속성 추적 : 고맙게도 모델 데이터가 자동으로 업데이트되는 모든 부품을 변경했을 때마다 관측소라는 바인딩 및 특수 유형의 변수에 고맙습니다. 이벤트 핸들러 및 청취자 추가에 대해 걱정할 필요가 없습니다. 모든 추가 작업은 녹아웃과 관측 가능성에 의해 내부적으로 수행되며, 기본 값이 변경되었을 때 청취자에게 알립니다.

3. 템플릿 : 응용 프로그램이 더 복잡해지고 풍부한 뷰 모델 데이터를 표시 할 수있는 방법이 필요하므로 코드를 간단하게 유지할 수 있습니다. Knockout에는 기본적으로 내장 된 템플릿 엔진이있어 즉시 사용할 수 있습니다. 그러나 원한다면 jquery.tmpl 또는 밑줄과 같은 타사 템플릿 엔진도 사용할 수 있습니다.

. 이 모든 이론이 당신에게 모호하게 들리더라도 걱정하지 마십시오. 우리가 튜토리얼과 코드 예제를 살펴보면 모든 것이 명확해질 것입니다.

시작하기

우리가 녹아웃으로 뛰어 들기 전에 HTML 문서에서 라이브러리를 다운로드하고 참조해야합니다.

<script type='text/javascript' src='knockout-2.0.0.js'></script>

코드를 프레젠테이션과 별도로 유지하는 것이 모든 애플리케이션 코드를 보유하기 위해 JavaScript 파일을 만드는 것이 좋습니다. 그리고 우리는 어떤 경우에는 jQuery를 사용할 것이기 때문에 당신은 그것을 참조해야합니다. <p>. </p> <as> 이것은 모범 사례로 간주되지만 훈련 목적으로 일을 더 쉽게 만들기 위해서는 헤드 태그에 포함 시키거나 마크 업을 배치하여 동일한 문서에 JavaScript 코드를 넣을 수 있습니다. <pre class="brush:php;toolbar:false"><script type='text/javascript' src='jquery-1.7.1.min.js'></script> &lt;script type='text/javascript' src='knockout-2.0.0.js'&gt;&lt;/script&gt; <script type='text/javascript' src='application.js'></script> </pre>. <create create> 이제 뷰 모델을 만들려면 다음과 같은 JavaScript 객체를 선언합니다. <p> <ind> 데이터 바인드 속성 (나중에 설명)은 HTML이 아니며 브라우저는 그 의미를 알지 못합니다. 따라서 효과를 발휘하려면 스크립트 끝에 KO.AppLyBindings () 함수를 삽입하여 녹아웃을 활성화해야합니다. 또한 외부 JavaScript 파일을 사용하거나 문서의 헤드 태그에 스크립트를 배치하는 경우 제대로 작동하려면 녹아웃 코드를 jQuery Ready 기능으로 래핑해야합니다. 시작할 기본 템플릿은 다음과 같습니다 </ind></p> <o> ko.applybindings () 메소드를 호출하고 뷰 모델을 전달하면 녹아웃이 지정된 모델을 UI에 바인딩하도록 지시합니다. 이보기 모델을 전체 UI의 한 부분에만 바인딩하려는 경우 DOM 요소를 제공 할 수도 있습니다. ko.applybindings ()는 두 개의 매개 변수를 사용합니다. 첫 번째 매개 변수에는 활성화 된 선언 바인딩과 함께 사용하려는 뷰 모델 객체를 말합니다. 두 번째 매개 변수는 선택 사항이며 데이터 바인드 속성을 검색하려는 문서의 어떤 부분을 정의합니다. 예를 들어, KO.AppLyBindings (ViewModel, Document.GetElementById ( 'Container'))는 ID 컨테이너 및 그 후손으로 요소로 활성화를 제한합니다. 여러 뷰 모델을 갖고 각각 페이지의 다른 영역과 연결하려는 경우 유용합니다. 작동 방식 Knockout을 사용하면 데이터 바인딩 속성을 마크 업에 포함시켜 데이터를 수행 할 데이터 바인딩을 지정하여 데이터를 DOM 요소에 바인딩 할 수 있습니다. 코드는 DOM 구조에 대한 언급이 없으므로 바인딩을 깨지 않고 HTML을 자유롭게 변경할 수 있습니다. 다음 예에서는 다음과 같은 스팬 요소에 텍스트 데이터 바인드 속성을 추가합니다. <p> <want> 그런 다음 텍스트의 가치를 동적으로 업데이트하려면 뷰 모델에서 관찰 가능한 것으로 선언해야합니다. </want></p> <pre class="brush:php;toolbar:false"> function viewModel() { // Your code here };</pre> <put> 이것은“요일은 일요일입니다. 휴식 시간입니다”. <p> </p> 관측소 <ements> 녹아웃은 ko.observable ()라는 사용자 정의 함수로 객체 속성을 감싸서 관찰 가능한 속성을 구현합니다. <pre class="brush:php;toolbar:false"> $(document).ready(function(){ function viewModel() { // Your code here }; ko.applyBindings(new viewModel()); });</pre> <set> 관찰 정보는 함수로 설정됩니다. 따라서 다음과 같은 방식으로 사용할 수 있습니다. <p></p> <pre class="brush:php;toolbar:false">&lt;script type='text/javascript' src='knockout-2.0.0.js'&gt;&lt;/script&gt; </pre> <require> 녹아웃은 관찰 가능한 속성을 사용하지 않아도됩니다. DOM 요소가 값을 한 번 받기를 원하지만 소스 개체의 값이 변경 될 때 업데이트되지 않으면 간단한 개체가 충분합니다. 그러나 소스 객체와 대상 DOM 요소가 동기화되기를 원한다면-양방향 바인딩-관찰 가능한 특성을 사용하는 것을 고려하고 싶을 것입니다. <p>. <you> 경우에 따라 두 개 이상의 관측부 값을 하나의 새로운 값으로 결합해야 할 수도 있습니다. 이것은 소위 컴퓨팅 된 관측 가능성으로 수행 할 수 있습니다. 계산 된 관찰 가능성은 하나 이상의 다른 관찰 가능에 의존하는 함수이며, 이러한 종속성이 변경 될 때마다 자동으로 업데이트됩니다. 계산 된 속성은 평가 변경에 의존하는 관찰 가능성이있을 때 자동으로 업데이트됩니다. 다음 예에서, FullDate라는 계산 된 관찰 가능한 정리가 하루, 월 및 연도가 변할 때마다 업데이트됩니다. </you></p> <.com> ko.computed ()는 두 번째 매개 변수를 가져옵니다. 전달하지 않고 this.day (), this.month () 또는 this.year ()를 언급 할 수 없었을 것입니다. 물건을 단순화하기 위해 가변 자체를 생성 할 수 있으므로 두 번째 매개 변수를 추가하지 않습니다. 이제부터 우리는 코드 예제 에서이 접근법을 사용할 것입니다. <p> </p> <ing> 하나의 객체를 처리 할 때 객체를 관찰 가능한 상태로 바꾸어 변경 사항을 쉽게 추적 할 수 있습니다. 그러나 여러 객체가 있다면 어떨까요? 이러한 경우 녹아웃에는 ko.observablearray ()라는 특수 객체가 있으며, 이는 사물 모음의 변화를 감지하고 응답 할 수 있습니다. 예를 들어 항목이 추가되고 제거 될 때 나타나고 사라지기 위해 UI의 반복 된 섹션이 필요할 때 여러 값을 표시 및/또는 편집 할 수 있습니다. <in> 당신은 관찰 가능한 배열이 해당 객체의 상태가 아니라 어레이에 어떤 객체가 있는지 추적한다는 것을 명심해야합니다. 객체를 관찰 가능한 배열에 넣는 것만으로도 해당 객체의 특성 자체가 관찰 가능하지는 않습니다. 원한다면 그 속성을 관찰 할 수 있지만 그것은 전적으로 당신에게 달려 있습니다. 관찰 가능한 배열은 어떤 객체가 보유하는지 추적하고 객체가 추가되거나 제거 될 때 리스너에게 알립니다. <pre class="brush:php;toolbar:false"><script type='text/javascript' src='jquery-1.7.1.min.js'></script> &lt;script type='text/javascript' src='knockout-2.0.0.js'&gt;&lt;/script&gt; <script type='text/javascript' src='application.js'></script> </pre> <an> 관찰 가능한 배열을 만들 때 비워 두거나 초기 값으로 채울 수 있습니다. 다음 예에서 우리는 요일에 채워진 관찰 가능한 배열을 만듭니다. <p> <see> 볼 수 있듯이, 녹아웃 배열을 읽고 쓰려면 모든 기본 JavaScript 함수를 사용할 수 있습니다. 그러나 녹아웃은 구문이 조금 더 편리한 자체 동등한 함수를 가지고 있습니다. </see></p> <list> 가용 함수의 전체 목록은 문서를 확인할 수 있습니다. <pre class="brush:php;toolbar:false"> function viewModel() { // Your code here };</pre> <ed>이 게시물을 읽는 것을 즐겼다면 학습 가능한 것을 좋아할 것입니다. 주인으로부터 신선한 기술과 기술을 배울 수있는 곳. 회원은 웹 용 JavaScript 프로그래밍과 같은 모든 SitePoint의 eBook 및 대화식 온라인 과정에 즉시 액세스 할 수 있습니다. <questions> knockoutjs 에 대한 자주 묻는 질문 (FAQ) <difference> Knockoutjs와 기타 JavaScript 라이브러리의 차이점은 무엇입니까? <em> </em> Knockoutjs는 개발자가 깨끗한 기본 데이터 모델로 풍부하고 반응 형 디스플레이 및 편집기 사용자 인터페이스를 만들 수 있도록 돕는 JavaScript 라이브러리입니다. 다른 JavaScript 라이브러리와 달리 Knockoutjs는 모델이 데이터를 지칭하는 MVVM (Model-View-ViewModel) 디자인 패턴을 사용하고,보기는 데이터의 시각적 표현이며, 뷰 모델은 모델과 뷰 사이의 중개자입니다. 이 패턴은 코드를보다 쉽게 ​​관리하고 테스트 할 수 있도록 우려 사항을 명확하게 분리 할 수 ​​있습니다. <h2> </h2> Knockoutjs를 시작하는 방법은 무엇입니까? <h3> </h3> Knockoutjs를 시작하려면 다음을 포함시켜야합니다. HTML 파일의 Knockoutjs 라이브러리. 공식 Knockoutjs 웹 사이트에서 다운로드하거나 CDN (Content Delivery Network)에서 직접 포함시킬 수 있습니다. 라이브러리를 포함시킨 후에는 뷰 모델을 만들고 Knockoutjs 구문을 사용하여 뷰 모드에 바인딩 할 수 있습니다. <p> </p> Knockoutjs에서 데이터 바인딩은 어떻게 작동합니까? <h3> </h3> Knockoutjs의 데이터 바인딩은 다음과 같습니다. 모델 (데이터)과보기 (웹 페이지의 DOM 요소) 간의 연결을 설정하는 방법. 이 연결을 사용하면 데이터 변경이 뷰를 자동으로 업데이트 할 수 있으며 그 반대도 마찬가지입니다. Knockoutjs는 텍스트 및 가치 바인딩과 같은 일반적인 작업에 대한 몇 가지 내장 바인딩을 제공하며보다 복잡한 시나리오에 대한 사용자 정의 바인딩을 만들 수도 있습니다. <p> Knockoutjs의 관찰 가능한 것은 무엇입니까? </p> <h3> 관찰 가능한 것은 특별합니다. 가입자에게 변경 사항을 알리고 종속성을 자동으로 감지 할 수있는 자바 스크립트 개체. Knockoutjs에서는 Observables를 사용하여 모델이 변경 될 때마다 DOM을 수동으로 조작 할 필요없이보기를 자동으로 업데이트합니다. 이것은 코드를 깨끗하고 유지 관리하기가 더 쉬워집니다. </h3> Knockoutjs에서 계산 된 관찰 가능성을 어떻게 사용합니까? <p> 계산 된 관찰 가능성은 하나 이상의 다른 관측반에 의존하는 함수이며 언제든지 자동 업데이트됩니다. 이러한 종속성이 변경됩니다. Knockoutjs에서 Computed Observable를 만들려면 ko.computed 함수를 사용하여 계산 된 값을 반환하는 함수를 전달합니다. </p> <h3> Knockoutjs에서 이벤트를 어떻게 처리합니까? </h3> <p> Knockoutjs는 이벤트를 제공합니다. 클릭 또는 키 프레스와 같은 사용자 작업에 응답 할 수 있도록 바인딩. ViewModel에서는 이벤트를 처리 할 수있는 함수를 정의한 다음 뷰에서 이벤트 바인딩을 사용하여 이벤트를 기능에 연결합니다.<role> Knockoutjs에서 ViewModel의 역할은 무엇입니까? <h3> </h3> Knockoutjs의 ViewModel은 UI의 데이터 및 작업을 나타내는 JavaScript 객체입니다. 보기 상태 유지, 사용자 작업 처리 및 필요할 때 모델 업데이트를 담당합니다. ViewModel은 데이터를 직접 표현하는 것이 아니라보기를위한 특수 버전입니다. <p> Knockoutjs에서 템플릿을 어떻게 사용합니까? </p> Knockoutjs의 템플릿은 재사용 가능한 것을 정의 할 수 있습니다. 다른 데이터로 렌더링 할 수있는 마크 업 덩어리. "Text/HTML"유형으로 스크립트 요소를 사용하여 템플릿을 정의한 다음 템플릿 바인딩을 사용하여 데이터로 템플릿을 렌더링 할 수 있습니다. Knockoutjs 애플리케이션을 어떻게 디버그합니까? <h3> </h3> 브라우저의 개발자 도구를 사용하여 Debging Knockoutjs 응용 프로그램을 수행 할 수 있습니다. ko.datafor 및 ko.contextfor 함수를 사용하여 DOM 요소에 바인딩 된 데이터를 검사 할 수 있습니다. 또한 Knockoutjs는 ko.tojson 함수를 제공합니다. ko.tojson 함수는 viewmodel을 JSON 문자열로 변환하여 쉽게 검사하기 위해 JSON 문자열로 변환 할 수 있습니다. <p> 다른 JavaScript 라이브러리와 함께 Knockoutjs를 사용할 수 있습니까? </p> <h3> 예, Knockoutjs JQuery 또는 Bootstrap과 같은 다른 JavaScript 라이브러리와 함께 사용할 수 있습니다. Knockoutjs는 DOM을 직접 조작하지 않고 뷰 모델의 변경 사항을 기반으로 뷰를 업데이트하므로 DOM을 조작하는 다른 라이브러리를 방해하지 않습니다.</h3></role></p></difference></questions></ed></list></an></in></ing></.com></require></set></ements></put></o></create></as>

위 내용은 초보자 가이드에 대한 안내서 : 1 부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!