Framework7, 작동 원리 정리

초기화

Framework7을 사용하기 위해 기본 레이아웃이 되는 HTML을 작성하였으면 이제 행동을 부여할 JavaScript를 작성할 차례이다.

// 앱 초기화와 함께 옵션으로 안드로이드 머터리얼 테마 기능을 극대화
var someApp = new Framework7({material: true}); 

// 기본 뷰 지정, 지정하지 않을 경우 링크 등이 오작동
someApp.addView('.view-main', {dynamicNavbar: true});

// DOM 조작을 핸들링을 하기 위한 Dom7 오브젝트 생성
var $$ = Dom7;

Copy

• Framework7은 초기화 후 반드시 기본 뷰를 지정해야 한다. 지정하지 않을 경우 링크 등이 정상 작동하지 않는다.
• Framework7은 프레임워크의 특화된 고유의 Dom7이라는 라이브러리를 제공한다. 기능과 사용법은 jQuery와 매우 유사하기 때문에 성능 최적화를 위해 HTML DOM 조작시 Dom7만 사용할 것을 권장한다.

페이지

페이지는 body > views > view > pages > page로 이어지는 Framework7의 렌더링 최소 단위이다.

<div data-page="some-page" class="page page-on-center">
    ...
</div>

Copy

• 모든 페이지는 class="page" 지정이 되어야 한며 각 페이지를 식별할 수 있는 유일한 data-page를 지정해야 한다.
• Framework7 내에서 모든 링크는 AJAX로 로드된다. 각 링크는 위 페이지 단위의 HTML 조각만 가지고 있으면 된다. 또한, 각 페이지의 JavaScript 코드는 메인이 되는 index.html 페이지에 몰아서 작성한다.

// 링크 파라메터로 id 전달
<a href="article.html?id=65535">...</a>

// 페이지 로드시 전달된 파라메터 확인 가능
someApp.onPageInit('article', function (page) {
    var id = page.query.id;
    ...
}).trigger();

Copy

• onPageInit 이벤트는 페이지가 로드될 경우 발생한다. page 파라메터를 통해 페이지 메타 정보를 획득하여 필요한 기능을 수행할 수 있다. [관련 링크]