템플릿 렌더링
ofa.js는 강력한 템플릿 렌더링 엔진을 제공하며, 풍부한 템플릿 구문을 포함하고 있어 개발자가 애플리케이션을 빠르게 구축할 수 있도록 도와줍니다. 먼저 가장 일반적으로 사용되는 텍스트 렌더링부터 소개하겠습니다.
페이지 데이터 바인딩
ofa.js에서는 각 페이지마다 data 객체가 있으며, 이곳에 페이지에서 사용할 변수들을 정의할 수 있습니다. 페이지가 렌더링되기 시작하면 자동으로 data 객체의 데이터가 템플릿에 바인딩되고, 템플릿에서는 {{변수명}} 구문을 사용해 해당 변수의 값을 렌더링합니다.
텍스트 렌더링
텍스트 렌더링은 가장 기본적인 렌더링 방식으로, 템플릿에서 {{변수명}} 문법을 사용하여 data 객체에서 해당 변수의 값을 표시할 수 있습니다.
{{val}}
HTML 콘텐츠 렌더링
요소에 :html 지시어를 추가하면 해당 변수의 HTML 문자열을 파싱하여 안전하게 요소 내부에 삽입할 수 있으며, 이를 통해 손쉽게 리치 텍스트 동적 렌더링이나 외부 HTML 조각의 임베드를 구현할 수 있습니다.