[knockoutjs] custom element 사용 관련

custom element 란

일반적인 태그를 컴포넌트 형태로 분리하여 custom element(custom tag)에 마음껏 붙일 수 있다.

react에서 사용되는 컴포넌트의 개념과 비슷하다고 보면 된다.

 

custom element 사용 방법

 - template으로 사용할 html파일을 만들고 그 안에는 tag들로 구성
 - ko.components.register('엘리먼트이름', {template:템플릿});

 - 템플릿 부분에는 직접 string 형태로 태그를 넣어도 되지만, 외부에서 파일을 읽어오게 할 수 있다.
   이때는 require를 사용하거나, require-text를 사용하면 된다.

 

사용 시 주의점

 - custom element는 소문자와 대시로 구성된 이름을 사용해야한다.
 - 예상되는 원인 : custom element와 ko.components.register의 엘리먼트에 대문자를 섞어서 적더라도, custom element가 적힌 html파일이 랜더링 되면서 소문자로 변환되어 출력되기 때문에 매칭되지 않는듯 하다.
 - 아래의 링크를 가면 소문자로 써야한다는 내용이 나올 것이다.

Custom Element name must be entered as lowercase string · Issue #1603 · knockout/knockout