KnockoutJS-관찰 가능 항목

KnockoutJS는 다음 세 가지 중요한 개념을 기반으로합니다.

Observable 및 이들 간의 종속성 추적-DOM 요소는 '데이터 바인딩'을 통해 ViewModel에 연결됩니다. Observable을 통해 정보를 교환합니다. 이것은 종속성 추적을 자동으로 처리합니다.
UI와 ViewModel 간의 선언적 바인딩-DOM 요소는 'data-bind'개념을 통해 ViewModel에 연결됩니다.
재사용 가능한 구성 요소를 만들기위한 템플릿-템플릿은 복잡한 웹 응용 프로그램을 만드는 강력한 방법을 제공합니다.

이 장에서 Observable을 공부할 것입니다.

이름에서 알 수 있듯이 ViewModel 데이터 / 프로퍼티를 Observable로 선언하면 매번 모든 데이터 수정이 데이터가 사용되는 모든 위치에 자동으로 반영됩니다. 여기에는 관련 종속성 새로 고침도 포함됩니다. KO는 이러한 것들을 처리하고이를 달성하기 위해 추가 코드를 작성할 필요가 없습니다.

Observable을 사용하면 UI와 ViewModel이 동적으로 통신하는 것이 매우 쉬워집니다.

통사론

함수로 ViewModel 속성을 선언하면됩니다. ko.observable() Observable로 만듭니다.

this.property = ko.observable('value');

예

Observable의 사용을 보여주는 다음 예제를 살펴 보겠습니다.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Observable Example</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" 
         type = "text/javascript"></script>
   </head>
   
   <body>
      <!-- This is called "view" of HTML markup that defines the appearance of UI -->

      <p>Enter your name: <input data-bind = "value: yourName" /></p>
      <p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

      <script>
         <!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->

         function AppViewModel() {
            this.yourName = ko.observable("");
         }

         // Activates knockout.js
         ko.applyBindings(new AppViewModel());
      </script>
   </body>
</html>

다음 줄은 입력 상자입니다. 보시다시피 data-bind 속성을 사용하여 yourName 값을 ViewModel에 바인딩했습니다.

<p>Enter your name: <input data-bind = "value: yourName" /> <p>

다음 줄은 yourName의 값을 인쇄합니다. 여기서 데이터 바인딩 유형은 단순히 값을 읽는 텍스트입니다.

<p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>

다음 줄에서 ko.observable은 데이터 수정에 대해 yourName 변수를 주시합니다. 수정이 있으면 해당 위치도 수정 된 값으로 업데이트됩니다. 다음 코드를 실행하면 입력 상자가 나타납니다. 해당 입력 상자를 업데이트 할 때 새 값이 사용되는 위치에 반영되거나 새로 고쳐집니다.

this.yourName = ko.observable("");

산출

위의 코드가 어떻게 작동하는지보기 위해 다음 단계를 수행해 보겠습니다.

위의 코드를 first_observable_pgm.htm 파일.
브라우저에서이 HTML 파일을 엽니 다.
이름을 Scott으로 입력하고 이름이 출력에 반영되는지 확인합니다.

데이터 수정은 UI 또는 ViewModel에서 발생할 수 있습니다. 데이터가 변경되는 위치에 관계없이 UI와 ViewModel은 이들 간의 동기화를 유지합니다. 이것은 양방향 바인딩 메커니즘을 만듭니다. 위의 예에서 입력 상자에서 이름을 변경하면 ViewModel이 새 값을 가져옵니다. ViewModel 내부에서 yourName 속성을 변경하면 UI가 새 값을받습니다.

Observable 읽기 및 쓰기

다음 표에는 Observable에서 수행 할 수있는 읽기 및 쓰기 작업이 나열되어 있습니다.

Sr. 아니.	읽기 / 쓰기 작업 및 구문
1	Read 값을 읽으려면 다음과 같은 매개 변수없이 Observable 속성을 호출하면됩니다. AppViewModel.yourName ();
2	Write Observable 속성에 값을 쓰거나 업데이트하려면 다음과 같은 매개 변수에 원하는 값을 전달하면됩니다. AppViewModel.yourName ( 'Bob');
삼	Write multiple 다음과 같은 연결 구문을 사용하여 여러 ViewModel 속성을 단일 행에서 업데이트 할 수 있습니다. AppViewModel.yourName ( 'Bob'). yourAge (45);

관찰 가능한 배열

Observable 선언은 단일 객체의 데이터 수정을 처리합니다. ObservableArray는 객체 컬렉션과 함께 작동합니다. 이것은 여러 유형의 값을 포함하고 사용자 작업에 따라 상태를 자주 변경하는 복잡한 응용 프로그램을 처리 할 때 매우 유용한 기능입니다.

통사론

this.arrayName = ko.observableArray();    // It's an empty array

Observable 배열은 그 안에 추가되거나 제거 된 객체 만 추적합니다. 개별 개체의 속성이 수정 된 경우에는 알리지 않습니다.

처음으로 초기화

배열을 초기화하는 동시에 다음과 같이 초기 값을 생성자에 전달하여 Observable로 선언 할 수 있습니다.

this.arrayName = ko.observableArray(['scott','jack']);

관찰 가능한 배열에서 읽기

다음과 같이 Observable 배열 요소에 액세스 할 수 있습니다.

alert('The second element is ' + arrayName()[1]);

ObservableArray 함수

KnockoutJS에는 자체 Observable 배열 함수 세트가 있습니다. 그들은 편리합니다.

이러한 기능은 모든 브라우저에서 작동합니다.
이 함수는 종속성 추적을 자동으로 처리합니다.
구문은 사용하기 쉽습니다. 예를 들어 배열에 요소를 삽입하려면 arrayName (). push ( 'value') 대신 arrayName.push ( 'value')를 사용하면됩니다.

다음은 다양한 Observable Array 메서드 목록입니다.

Sr. 아니.	방법 및 설명
1	푸시 ( '값') 배열 끝에 새 항목을 삽입합니다.
2	팝() 배열에서 마지막 항목을 제거하고 반환합니다.
삼	unshift ( '값') 배열의 시작 부분에 새 값을 삽입합니다.
4	시프트() 배열에서 첫 번째 항목을 제거하고 반환합니다.
5	역전() 배열의 순서를 반대로합니다.
6	종류() 오름차순으로 배열 항목을 정렬합니다.
7	스플 라이스 (시작 인덱스, 끝 인덱스) 두 개의 매개 변수 (start-index 및 end-index)를 허용합니다. 시작부터 끝 색인까지 항목을 제거하고 배열로 반환합니다.
8	indexOf ( '값') 이 함수는 제공된 매개 변수의 첫 번째 발생 색인을 리턴합니다.
9	슬라이스 (시작 인덱스, 끝 인덱스) 이 메서드는 배열 조각을 잘라냅니다. 시작 인덱스부터 끝 인덱스까지의 항목을 반환합니다.
10	모두 제거() 모든 항목을 제거하고 배열로 반환합니다.
11	제거 ( '값') 매개 변수와 일치하는 항목을 제거하고 배열로 리턴합니다.
12	제거 (함수 (항목) {조건}) 조건을 만족하는 항목을 제거하고 배열로 반환합니다.
13	제거 ([값 집합]) 주어진 값 세트와 일치하는 항목을 제거합니다.
14	destroyAll() 값이 true 인 _destroy 속성이있는 배열의 모든 항목을 표시합니다.
15	destroy('value') 매개 변수와 동일한 항목을 검색하고 값이 true 인 특수 특성 _destroy로 표시합니다.
16	destroy(function(item) { condition}) 조건을 만족하는 모든 항목을 찾아 참 값으로 _destroy 속성으로 표시합니다.
17	destroy([set of values]) 주어진 값 집합과 일치하는 항목을 찾아 참 값이있는 _destroy로 표시합니다.

Note − ObservableArrays의 Destroy 및 DestroyAll 함수는 대부분 'Ruby on Rails'개발자 전용입니다.

destroy 메소드를 사용하면 해당 항목이 실제로 배열에서 삭제되는 것이 아니라 _destroy 속성 을 true 값 으로 표시 하여 UI에서 읽을 수 없도록 숨겨집니다 . _destroy 가 true 로 표시된 항목 은 나중에 JSON 개체 그래프를 처리하는 동안 삭제됩니다.