초보자 가이드에 대한 안내서 : 파트 3

키 테이크 아웃

knockoutjs의`foreach` 바인딩을 사용하여 배열 데이터를 기반으로 테이블 행 또는 목록 항목을 동적으로 생성하는 등 배열에서 각 항목의 마크 업 섹션을 자동으로 복제하고 바인딩합니다.

.

`$ data`,`$ parent`,`$ parents`,`$ root`와 같은 슈도 디바일을 활용하여 중첩 된 바인딩 내에서``$ root ',``$ root'는 다른 수준의 뷰 모델 계층에서 데이터를 효과적으로 조작하고 조작합니다. UI의 조건부 렌더링 섹션을 조건부로 렌더링하고 새로운 바인딩 컨텍스트를 설정하여 응용 프로그램의 역동 성과 가독성을 향상시키기 위해`if` 및`를 구현하십시오.

. Knockoutjs의 템플릿 기능을 탐색하여 추가 매개 변수 및 콜백을 전달하기위한 옵션과 함께 '템플릿'바인딩을 사용하여 제어 흐름 바인딩 및 고급 시나리오를 사용하여 기본 템플릿을 모두 허용합니다. 녹아웃 관찰 가능성을 확장하고 사용자 정의 바인딩을 만들어 복잡한 동작과 상호 작용을 캡슐화하여 깨끗하고 관리 가능한 코드베이스를 유지하는 재사용 가능한 솔루션을 제공합니다.
• Knockoutjs에 대한 초보자 안내서 : 템플릿 및 더 많은
4 가지 제어 흐름 바인딩이 있습니다 : foreach, if, ifnot and with. 이러한 제어 바인딩은 아래에서 볼 수 있듯이 이름 템플릿을 작성하지 않고 제어 흐름 로직을 선언적으로 정의 할 수 있습니다. foreach 바인딩은 배열의 각 항목에 대한 마크 업 섹션을 복제하고 해당 마크 업의 각 사본을 해당 배열 항목에 바인딩합니다. 이것은 목록 또는 테이블 렌더링에 적합합니다. 배열이 관찰 가능한 배열 인 경우 나중에 배열 항목을 추가하거나 제거 할 때마다 바인딩은 다른 DOM 요소에 영향을 미치지 않고 목록 항목 또는 테이블 행의 더 많은 사본을 삽입하거나 제거하여 UI를 업데이트합니다. 다음 예를 참조하십시오.
• 여기서, 책 어레이의 각 배열 항목에 대해 테이블 ​​행이 자동으로 생성됩니다. 때때로 속성 중 하나가 아닌 배열 항목 자체를 참조해야 할 수도 있습니다. 이 경우 pseudovariable $ 데이터를 사용할 수 있습니다. Foreach 블록 내에서 사용되는 경우 "현재 항목"을 의미합니다.
  이것은 각 항목의 코드를 개별적으로 반복 할 필요없이 요일 내내 나열됩니다. 녹아웃에서 당신은 원하는만큼 많은 제어 흐름 바인딩을 할 수 있습니다. 그리고 그렇게 할 때, 계층 구조에 도달하고 부모 상황에서 데이터 또는 기능에 액세스하는 것이 종종 바람직합니다. 이 경우 다음 유사 변환체를 사용할 수 있습니다 $ parent - 현재 foreach block
  외부의 데이터 항목을 나타냅니다. $ 부모-모든 외부 제어 흐름 스코프의 데이터 항목을 나타내는 배열입니다. $ Parents [0]는 $ 부모와 동일합니다. $ Parents [1]는 조부모 제어 흐름 범위의 항목을 나타냅니다. $ root-외부 컨트롤 흐름 스코프의 항목을 나타냅니다. 일반적으로 이것은 최상위 뷰 모델 객체입니다.

  다음 예에서는 책 배열에서 책 항목을 올바르게 제거하기 위해 $ parent pseudovariable을 사용합니다.

  경우에 따라 마크 업의 섹션을 복제 할 수도 있지만 Foreach Binding을 넣을 컨테이너 요소가 없습니다. 그런 다음 다음 구문을 사용할 수 있습니다

  이 예에서는 정상적인 foreach 바인딩을 사용할 수 없습니다.

  에 넣으면 헤더 항목이 복제되며
  내부에 추가 컨테이너를 넣으려면
  • 요소 만
    s 내부에 허용되기 때문에 할 수 없습니다. 해결책은 및 컨테이너가없는 제어 흐름 구문을 사용하는 것입니다. 이 가상 요소는 실제 컨테이너 요소가있는 것처럼. 이 유형의 구문은 IF와 바인딩에도 유효합니다. IF 바인딩은 지정된 표현식이 true로 평가되는 경우에만 문서에 마크 업 섹션이 나타납니다. 그러면 포함 된 마크 업이 문서에 존재하며 데이터 바인드 속성이 적용됩니다. 반면에, 표현식이 거짓으로 평가되면, 포함 된 마크 업은 먼저 바인딩을 적용하지 않고 문서에서 제거됩니다.

    <table>
     <thead>
      <tr><th>Title</th><th>Author</th></tr>
     </thead>
     <tbody data-bind="foreach: books">
      <tr>
       <td data-bind="text: title"></td>
       <td data-bind="text: author"></td>      
      </tr>
     </tbody>
    </table>
    
    <script type="text/javascript">
      function viewModel() {
       var self = this;
       self.books = ko.observableArray([
         { title: 'The Secret', author: 'Rhonda Byrne' },
         { title: 'The Power', author: 'Rhonda Byrne' },
         { title: 'The Magic', author: 'Rhonda Byrne' }
       ]);
      }
      ko.applyBindings(new viewModel());    
    </script>

    with 바인딩은 새로운 바인딩 컨텍스트를 생성하므로 자손 요소가 지정된 객체의 맥락에서 바인딩됩니다. 자손 요소를 바인딩하기위한 컨텍스트로 사용하려는 객체. 당신이 공급하는 표현이 null 또는 정의되지 않은 것으로 평가되면, 후손 요소는 전혀 구속되지 않지만 대신 문서에서 제거됩니다. 바인딩이있는 것은 데이터 컨텍스트를 지정한 객체로 변경합니다. 이것은 여러 부모/자식 관계를 가진 객체 그래프를 다룰 때 특히 유용합니다.

    템플릿

    템플릿 바인딩은 템플릿 렌더링 결과와 관련된 DOM 요소를 채 웁니다. 템플릿은 뷰 모델 데이터의 함수로 반복 또는 중첩 블록을 사용하여 정교한 UI 구조를 구축하는 간단하고 편리한 방법입니다. 템플릿을 사용하는 두 가지 주요 방법이 있습니다. 첫 번째 템플릿은 첫 번째 템플릿 (Native Templating)은 Foreach, if, with 및 기타 제어 흐름 바인딩을 뒷받침하는 메커니즘입니다. 내부적으로 해당 제어 흐름 바인딩은 요소에 포함 된 HTML 마크 업을 캡처하고 임의의 데이터 항목에 대해 렌더링하는 템플릿으로 사용합니다. 이 기능은 녹아웃에 내장되어 있으며 외부 라이브러리가 필요하지 않습니다. 여기에서 템플릿을 만들기위한 기본 체계를 볼 수 있습니다.

    <ul data-bind="foreach: daysOfWeek">
     <li>
     <span data-bind="text: $data"></span>
     </li>
    </ul>
    
    <script type="text/javascript">
    function viewModel() {
      var self = this;
      self.daysOfWeek = ko.observableArray([
       'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
      ]);
    };
    
    ko.applyBindings(new viewModel());
    </script>

    다음 예에서는 실제로 사용하는 방법을 볼 수 있습니다.

    <table>
     <thead>
      <tr><th>Title</th><th>Author</th></tr>
     </thead>
     <tbody data-bind="foreach: books">
      <tr>
       <td data-bind="text: title"></td>
       <td data-bind="text: author"></td>      
      </tr>
     </tbody>
    </table>
    
    <script type="text/javascript">
      function viewModel() {
       var self = this;
       self.books = ko.observableArray([
         { title: 'The Secret', author: 'Rhonda Byrne' },
         { title: 'The Power', author: 'Rhonda Byrne' },
         { title: 'The Magic', author: 'Rhonda Byrne' }
       ]);
      }
      ko.applyBindings(new viewModel());    
    </script>

    여기서, 우리는 템플릿을 나머지 마크 업에 묶기 위해 템플릿 이름과 동일하게 사용해야합니다. 이 경우‘Book-Template’입니다 위에서 설명한 짧은 구문을 사용하는 대신 더 많은 매개 변수를 템플릿 바인딩으로 전달할 수있어 최종 출력을보다 정확하게 제어 할 수 있습니다.

    여기, 이름은 렌더링하려는 템플릿을 포함하는 요소의 ID입니다. 데이터는 템플릿이 렌더링하기위한 데이터로 제공 할 객체입니다. 그리고 애프터 렌더는 렌더링 된 DOM 요소에 대해 호출되는 콜백 함수입니다. 다음 예제는 Foreach 바인딩과 동일합니다. 여기에서 Foreach는 템플릿 바인딩의 매개 변수로 전달됩니다.

    당신은 foreach binding을 사용하는 요소 내부에 익명 템플릿을 직접 포함시켜 정확히 동일한 결과를 얻을 수 있습니다.

    템플릿을 사용하는 두 번째 방법은 녹아웃을 타사 템플릿 엔진에 연결하는 것입니다. 녹아웃은 모델 값을 외부 템플릿 엔진으로 전달하고 결과 마크 업 문자열을 문서에 주입합니다. 및 밑바닥을 사용하는 예는 템플릿 엔진을 확인하십시오. 관측 가능성 확장 Knockout Observables는 해당 값이 변경 될 때 읽기/쓰기 값을 지원하고 가입자에게 알리는 데 필요한 기본 기능을 제공합니다. 그러나 어떤 경우에는 관찰 가능한 추가 특성을 추가하는 것과 같은 관찰 가능한에 추가 기능을 추가 할 수도 있습니다. 녹아웃 익스텐더는 쉽고 유연한 방법을 제공합니다.

    <ul data-bind="foreach: daysOfWeek">
     <li>
     <span data-bind="text: $data"></span>
     </li>
    </ul>
    
    <script type="text/javascript">
    function viewModel() {
      var self = this;
      self.daysOfWeek = ko.observableArray([
       'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
      ]);
    };
    
    ko.applyBindings(new viewModel());
    </script>

    extender를 만드는 데 ko.extenders 객체에 함수를 추가하는 것이 포함됩니다. 이 함수는 관찰 가능한 자체를 첫 번째 인수와 두 번째 인수의 옵션으로 취합니다. 그런 다음 관찰 가능성을 반환하거나 원래 관측 가능성을 어떤 방식으로 사용하는 계산 가능한 관찰 가능한 것과 같은 새로운 것을 반환 할 수 있습니다.

    . 이제 우리는 힌트 메시지를 보여줄 수있는 능력을 추가하는 관찰 가능한 익스텐더를 만들 것입니다.

    커스텀 바인딩 Knockout의 내장 바인딩은 대부분의 바인딩 시나리오를 처리 할 수 ​​있지만, 다루지 않은 특수 바인딩 시나리오를 만나면 녹아웃으로 사용자 정의 바인딩을 만들 수있어 정교한 동작을 반복하기 쉬운 방법. 예를 들어, 사용자 정의 바인딩 형태로 그리드, 탭 세트 등과 같은 대화 형 구성 요소를 만들 수 있습니다. 녹아웃 바인딩은 두 가지 방법으로 구성됩니다 : Init and Update. 바인딩 생성은이 두 가지 메소드로 객체를 작성하고 아래와 같이 ko.bindinghandlers를 사용하여 녹아웃으로 해당 객체를 등록하는 것만 큼 간단합니다.

    <table>
     <thead>
      <tr><th>Title</th><th>Author</th></tr>
     </thead>
     <tbody data-bind="foreach: books">
      <tr>
       <td data-bind="text: title"></td>
       <td data-bind="text: author"></td>      
      </tr>
     </tbody>
    </table>
    
    <script type="text/javascript">
      function viewModel() {
       var self = this;
       self.books = ko.observableArray([
         { title: 'The Secret', author: 'Rhonda Byrne' },
         { title: 'The Power', author: 'Rhonda Byrne' },
         { title: 'The Magic', author: 'Rhonda Byrne' }
       ]);
      }
      ko.applyBindings(new viewModel());    
    </script>

    init 함수는이 요소에 대해 바인딩이 처음으로 평가되는 경우에만 실행됩니다. 이것은 일반적으로 일회성 초기화 코드를 실행하거나 UI에서 트리거되는 이벤트를 기반으로 뷰 모델을 업데이트 할 수있는 이벤트 처리기를 연결하는 데 사용됩니다. 업데이트 함수는 연관된 관찰 가능성이 수정 될 때 응답하는 방법을 제공합니다. 일반적으로 이것은 뷰 모델의 변경 사항을 기반으로 UI를 업데이트하는 데 사용됩니다.

    init 및 업데이트 기능에는 4 개의 매개 변수가 제공됩니다. 일반적으로 뷰 모델을 UI에 연결하는 표준 방법이므로 요소 및 ValueAccessor 매개 변수에 집중하고 싶을 것입니다. 실제로 Init 및 Update Callbacks를 모두 제공 할 필요는 없습니다. 필요한 전부라면 하나 또는 다른 하나만 제공 할 수 있습니다.

    . 요소 매개 변수는 바인딩을 포함하는 DOM 요소에 직접 액세스 할 수 있습니다. ValueAccessor 매개 변수는 바인딩에 전달 된 내용에 액세스 할 수있는 함수입니다. 관찰 가능한 것을 통과하면이 기능의 결과는 그 관찰 가능 (그 가치가 아님)입니다. 바인딩에서 표현을 사용한 경우 ValueAcessor의 결과가 표현의 결과가됩니다.

    AllBindingSaccessor 매개 변수는 동일한 데이터 바인드 속성에 나열된 다른 모든 바인딩에 액세스 할 수 있습니다. 이것은 일반적 으로이 바인딩과 상호 작용하는 다른 바인딩에 접근하는 데 사용됩니다. 이러한 바인딩은 그와 관련된 코드가 없을 가능성이 높으며 여러 속성이있는 객체를 기본 바인딩에 전달하지 않는 한 추가 옵션을 바인딩에 전달하는 방법 일뿐입니다. 예를 들어, 옵션 value, 옵션 직원 및 옵션 커넥션은 옵션 바인딩에 옵션을 전달하는 데 사용되는 바인딩입니다. 뷰 모델 매개 변수는 템플릿 외부의 바인딩에 대한 전체 뷰 모델에 대한 액세스를 제공합니다. 템플릿 내에서 이것은 템플릿에 바인딩되는 데이터로 설정됩니다. 예를 들어, 템플릿 바인딩의 Foreach 옵션을 사용하면 뷰 모델 매개 변수가 템플릿을 통해 전송되는 현재 배열 멤버로 설정됩니다. 대부분의 경우 ValueAccessor는 원하는 데이터를 제공하지만 기능을 호출/적용 할 때 대상이되기 위해 개체가 필요한 경우 ViewModel 매개 변수가 특히 유용합니다. 다음 예에서 우리는 초점이 맞춰 질 때 텍스트의 확장을하는 사용자 정의 바인딩을 만듭니다.

    먼저, init 함수에서 우리는 요소가 초점을 맞추면 그 값이 true로 설정되고 그 반대도 마찬가지라고 선언합니다. 그런 다음 업데이트 기능에서 AllBindingAccessor 매개 변수를 사용하여 바인딩에 추가 옵션을 추가합니다 - ScaleUp 및 Scaledown. 우리는 ko.utils.unwrapobservable을 사용하여 현재 바인딩 값을 얻고 그것이 true로 설정되었는지 확인합니다. 그렇다면 DOM 요소가 조정되고, 그렇지 않으면 축소됩니다.

    . 마침내 힌트를 결합한 예제를 보자.

    당신은 힌트를 관찰 가능하고 scaleonfocus 바인딩을 별도의 파일에 배치 한 다음 주 파일에 포함시킬 수 있습니다. 이렇게하면 코드가 모듈화되어 원할 때마다 재사용 할 수 있습니다.

    그게 다야, 여러분! 이 시리즈를 즐겼기를 바랍니다. 이제 녹아웃을 시작하고 계속 배우고 실험하는 데 필요한 모든 지식이 있습니다. 보다 포괄적 인 예제와 튜토리얼을 보려면 녹아웃 사이트로 이동할 수 있습니다. knockoutjs

    <table>
     <thead>
      <tr><th>Title</th><th>Author</th></tr>
     </thead>
     <tbody data-bind="foreach: books">
      <tr>
       <td data-bind="text: title"></td>
       <td data-bind="text: author"></td>      
      </tr>
     </tbody>
    </table>
    
    <script type="text/javascript">
      function viewModel() {
       var self = this;
       self.books = ko.observableArray([
         { title: 'The Secret', author: 'Rhonda Byrne' },
         { title: 'The Power', author: 'Rhonda Byrne' },
         { title: 'The Magic', author: 'Rhonda Byrne' }
       ]);
      }
      ko.applyBindings(new viewModel());    
    </script>

    에 대해 자주 묻는 질문 ko.utils.unwrapobservable의 목적은 무엇입니까? 이 기능은 관찰 가능하거나 관찰 할 수없는 것을 다루는 지 확실하지 않은 경우 특히 유용합니다. 각각에 대해 별도의 코드를 작성하지 않고도 두 경우를 모두 처리 할 수 ​​있습니다. 이 기능은 관측 가능성으로 작업 할 수있는 추가 기능을 제공하는 Knockoutjs의 유틸리티 기능의 일부입니다. HTML 섹션에 항목 배열. 배열의 각 항목에 대한 관련 DOM 요소와 그 후손을 복제하여 루프를 만듭니다. 이것은 UI에 항목 목록을 표시 할 때 특히 유용합니다. Foreach 바인딩은 또한 각 반복에 대한 컨텍스트를 제공하여 $ data 키워드를 사용하여 현재 항목에 액세스 할 수 있습니다.

    Knockoutjs의 매핑 플러그인은 무엇입니까?

    Knockoutjs의 매핑 플러그인은 다음과 같습니다. JSON 객체를 관찰 가능한 객체로 변환하는 데 도움이되는 유틸리티. 이것은 서버에서 데이터로 작업 할 때 특히 유용합니다. 매핑 플러그인을 사용하면 데이터가 뷰 모델에 쉽게 매핑 할 수 있으며 매핑 프로세스를 사용자 정의 할 수있는 옵션도 제공합니다.

    컬렉션에서 컬렉션으로 작업 할 수있는 방법?

    컬렉션으로 작업 할 수 있습니다. Knockoutjs에서는 관찰 가능한 배열의 도움으로 쉽게 만들어집니다. 관찰 가능한 어레이는 다양한 값을 보유하는 특수한 유형의 관측 가능입니다. 푸시, 팝, 시프트, 시프트, 리버스, 정렬 및 스플 라이스와 같은 배열을 조작하는 기능을 제공합니다. 관찰 가능한 배열은 항목이 추가되거나 제거 될 때 가입자에게 알리므로 UI를 데이터와 동기화 할 수 있도록 쉽게 유지할 수 있습니다.

    Knockoutjs에서 문제를 발견했습니다. Knockoutjs에서 문제를 발견 한 경우 Knockoutjs Github 페이지에서보고 할 수 있습니다. 문제를보고하기 전에 다른 사람이 문제를 이미보고했는지 확인하는 것이 좋습니다. 그렇지 않은 경우 새로운 문제를 만들고 가능한 한 많은 세부 사항을 제공하여 Knockoutjs 팀이 문제를 이해하고 해결할 수 있도록 도와 줄 수 있습니다. Knockoutjs에서 계산 된 관찰 가능한 방법을 어떻게 사용할 수 있습니까?

    Knockoutjs의 계산 된 관찰 가능성은 하나 이상의 다른 관측소에 의존하는 함수이며 이러한 종속성이 변경 될 때마다 자동으로 업데이트됩니다. 계산 된 관찰 가능성은 어떤 방식으로 관찰 가능성을 결합하거나 조작하려고 할 때 유용합니다. 계산 된 관찰 가능한 기능을 만들려면 ko.computed 함수를 사용할 수 있습니다.

    Knockoutjs에서 이벤트를 처리 할 수있는 방법은 무엇입니까?

    Knockoutjs는 클릭, 제출, 클릭, 제출,와 같은 이벤트를 처리하기 위해 여러 바인딩을 제공합니다. 초점을 맞추십시오. 이러한 바인딩을 사용하면 관련 이벤트가 발생할 때 실행될 JavaScript 함수를 지정할 수 있습니다. 함수는 뷰 모델이거나 독립형 함수의 일부가 될 수 있습니다.

    Knockoutjs에서 사용자 정의 바인딩을 어떻게 사용할 수 있습니까?

    Knockoutjs의 사용자 정의 바인딩은 자신만의 바인딩을 만들 수 있습니다. 내장 바인딩처럼 사용됩니다. 재사용 가능한 기능을 만들 때 특히 유용합니다. 사용자 정의 바인딩을 만들려면 KO.BindingHandlers 객체를 사용할 수 있습니다.

    Knockoutjs 애플리케이션을 디버그하는 방법은 어떻게 브라우저의 개발자 도구를 사용하여 Knockoutjs 애플리케이션을 디버깅 할 수 있습니다. Console.log를 사용하여 값을 인쇄하거나 중단 점을 사용하여 실행을 일시 중지하고 응용 프로그램의 현재 상태를 검사 할 수 있습니다. Knockoutjs는 또한 ko.tojson 함수를 제공합니다. Ko.tojson 함수는 또한 뷰 모델을 JSON 문자열로 변환하여 쉽게 검사 할 수 있습니다.

    Knockoutjs 응용 프로그램을 어떻게 테스트 할 수 있습니까?

    Knockoutjs 애플리케이션을 테스트 할 수 있습니다. Jasmine 또는 Mocha와 같은 JavaScript 테스트 프레임 워크를 사용하여 수행됩니다. 이러한 프레임 워크를 사용하면 뷰 모델에 대한 단위 테스트를 작성하여 예상대로 작동하도록합니다. Knockoutjs 애플리케이션을 테스트 할 때는 테스트를보다 쉽게하기 위해 뷰 모델을 DOM에서 최대한 많이 분리하는 것이 좋습니다.

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