KnockoutJS-템플릿

Template반복적으로 사용할 수있는 DOM 요소 집합입니다. 템플릿은 DOM 요소의 중복을 최소화하는 속성으로 인해 복잡한 애플리케이션을 쉽게 구축 할 수 있도록합니다.

템플릿을 만드는 방법에는 두 가지가 있습니다.

Native templating−이 방법은 foreach, with, if와 같은 제어 흐름 바인딩을 지원합니다. 이러한 바인딩은 요소에있는 HTML 마크 업을 캡처하고이를 임의 항목의 템플릿으로 사용합니다. 이 템플릿에는 외부 라이브러리가 필요하지 않습니다.
String-based templating− KO는 타사 엔진에 연결하여 ViewModel 값을 전달하고 결과 마크 업을 문서에 삽입합니다. 예를 들어 JQuery.tmpl 및 Underscore Engine입니다.

Syntax

template: <parameter-value>

<script type = "text/html" id = "template-name">
   ...
   ...   // DOM elemets to be processed
   ...
</script>

참고 type 제공됩니다 text/html KO에게 알리기 위해 스크립트 블록에서 실행 블록이 아니라 렌더링해야하는 템플릿 블록입니다.

Parameters

다음 속성의 조합은 매개 변수 값으로 템플릿에 보낼 수 있습니다.

name − 이것은 템플릿의 이름을 나타냅니다.
nodes− 템플릿으로 사용할 DOM 노드의 배열을 나타냅니다. name 매개 변수가 전달되면이 매개 변수는 무시됩니다.
data − 이것은 템플릿을 통해 표시되는 데이터 일뿐입니다.
if − 주어진 조건이 true 또는 true-like 값이되면 템플릿이 제공됩니다.
foreach − foreach 형식으로 템플릿을 제공합니다.
as − 이것은 foreach 요소에 별칭을 생성하기위한 것입니다.
afterAdd, afterRender, beforeRemove − 이들은 모두 수행되는 작업에 따라 실행되는 호출 가능한 함수를 나타냅니다.

관찰

명명 된 템플릿 렌더링

템플릿은 제어 흐름 바인딩과 함께 사용할 때 DOM 내부의 HTML 마크 업에 의해 암시 적으로 정의됩니다. 그러나 원하는 경우 템플릿을 별도의 요소로 분리 한 다음 이름으로 참조 할 수 있습니다.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Named Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { name: 'friend-template', data: friend1 }"></div>
      <div data-bind = "template: { name: 'friend-template', data: friend2 }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friend1 = { 
               name: 'Smith', 
               contactNumber: 4556750345, 
               email: '[email protected]' 
            };
            
            this.friend2 = { 
               name: 'Jack', 
               contactNumber: 6789358001, 
               email: '[email protected]' 
            };
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

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

위의 코드를 template-named.htm 파일.
브라우저에서이 HTML 파일을 엽니 다.
여기에서는 friend-template이 2 번 사용됩니다.

템플릿에서 "foreach"사용

다음은 사용 예입니다. foreach 템플릿 이름과 함께 매개 변수.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - foreach used with Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { name: 'friend-template', foreach: friends }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friends = [
               { name: 'Smith', contactNumber: 4556750345, email: '[email protected]' },
               { name: 'Jack', contactNumber: 6789358001, email: '[email protected]' },
               { name: 'Lisa', contactNumber: 4567893131, email: '[email protected]' }
            ]
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

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

위의 코드를 template-foreach.htm 파일.
브라우저에서이 HTML 파일을 엽니 다.
여기서 foreach 컨트롤은 템플릿 바인딩에 사용됩니다.

foreach 항목에 대한 키워드로 사용하여 별칭 만들기

다음은 foreach 항목에 대해 별칭을 만드는 방법입니다.

<div data-bind = "template: { 
   name: 'friend-template', 
   foreach: friends, 
   as: 'frnz' 
}"></div>

별칭을 만들어 foreach 루프 내부에서 부모 개체를 쉽게 참조 할 수 있습니다. 이 기능은 코드가 복잡하고 여러 수준에서 중첩 될 때 유용합니다.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - using alias in Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <ul data-bind = "template: { 
         name: 'friend-template', 
         foreach: friends, 
         as: 'frnz' 
      }"></ul>

      <script type = "text/html" id = "friend-template">
         <li>
            <h3 data-bind = "text: name"></h3>
            <span>Contact Numbers</span>
            <ul data-bind = "template: { 
               name : 'contacts-template', 
               foreach:contactNumber, 
               as: 'cont'
            } "></ul>
            <p>Email-id: <span data-bind = "text: email"></span></p>
         </li>
      </script>

      <script type = "text/html" id = "contacts-template">
         <li>
            <p><span data-bind = "text: cont"></span></p>
         </li>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            this.friends = ko.observableArray ( [
               { 
                  name: 'Smith', 
                  contactNumber: [ 4556750345, 4356787934 ], 
                  email: '[email protected]' 
               },
               
               { 
                  name: 'Jack', 
                  contactNumber: [ 6789358001, 3456895445 ], 
                  email: '[email protected]' 
               },
               
               { 
                  name: 'Lisa', 
                  contactNumber: [ 4567893131, 9876456783, 1349873445 ],  
                  email: '[email protected]' 
               }
            ]);
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

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

위의 코드를 template-as-alias.htm 파일.
브라우저에서이 HTML 파일을 엽니 다.
배열의 전체 이름 대신 별칭이 사용됩니다.

afterAdd, beforeRemove 및 afterRender 사용

템플릿에 의해 생성 된 DOM 요소에서 추가 사용자 정의 로직을 실행해야하는 상황이 있습니다. 이 경우 다음 콜백을 사용할 수 있습니다. 다음 foreach 요소를 사용하고 있다고 생각하십시오-

afterAdd −이 함수는 foreach에서 언급 한 배열에 새 항목이 추가 될 때 호출됩니다.

beforeRemove −이 함수는 foreach에 언급 된 배열에서 항목을 제거하기 직전에 호출됩니다.

afterRender − 여기에 언급 된 함수는 foreach가 렌더링 될 때마다 호출되고 배열에 새 항목이 추가됩니다.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Use of afterRender Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
      <script src = "https://code.jquery.com/jquery-2.1.3.min.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { 
         name: 'friend-template', 
         foreach: friends , 
         afterRender: afterProcess
      }"></div>

      <script type = "text/html" id = "friend-template">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
         <p>Email-id: <span data-bind = "text: email"></span></p>
         <button data-bind = "click: $root.removeContact">remove </button>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
            self = this;
            this.friends = ko.observableArray ([
               { name: 'Smith', contactNumber: 4556750345, email: '[email protected]' },
               { name: 'Jack', contactNumber: 6789358001, email: '[email protected]' },
            ])

            this.afterProcess = function(elements, data){
               $(elements).css({color: 'magenta' });
            }

            self.removeContact = function() {
               self.friends.remove(this);
            }
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
   </body>
</html>

Output

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

위의 코드를 template-afterrender.htm 파일.
브라우저에서이 HTML 파일을 엽니 다.
여기서는 foreach가 렌더링 될 때마다 afterProcess 함수가 실행됩니다.

동적으로 템플릿 선택

사용할 수있는 템플릿이 여러 개인 경우 이름을 다음과 같이 만들어 동적으로 하나를 선택할 수 있습니다. observable매개 변수. 따라서 이름 매개 변수가 변경되면 템플릿 값이 재평가되고 데이터가 다시 렌더링됩니다.

Example

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Templating - Dynamic Template</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <h2>Friends List</h2>
      Here are the Friends from your contact page:
      <div data-bind = "template: { 
         name: whichTemplate, 
         foreach: friends 
      }"></div>

      <script type = "text/html" id = "only-phon">
         <h3 data-bind = "text: name"></h3>
         <p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
      </script>

      <script type = "text/html" id = "only-email">
         <h3 data-bind = "text: name"></h3>
         <p>Email-id: <span data-bind = "text: email"></span></p>
      </script>

      <script type = "text/javascript">
         function MyViewModel() {
   
            this.friends = ko.observableArray ([
               {
                  name: 'Smith', 
                  contactNumber: 4556750345, 
                  email: '[email protected]', 
                  active: ko.observable(true)
               },
               
               {
                  name: 'Jack', 
                  contactNumber: 6789358001, 
                  email: '[email protected]', 
                  active: ko.observable(false)
               },
            ]);

            this.whichTemplate = function(friends) {
               return friends.active() ? "only-phon" : "only-email";
            }
         }

         var vm = new MyViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

Output

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