data-view는..
javascript libarary for html data mapping
data-view는 json객체를 html에 쉽게 mapping하기 위한 javascript 라이브러리입니다. data-view는 쉽고 빠르게 웹 어플리케이션을 개발 할 수 있도록 도와줍니다. data-view는 AngularJs와 비슷한 형식이지만 chaining pattern 같은 문법이나 scope와 같은 개념 이용하지 않고 기존에 단순한 javascript 문법 형식을 크게 변경하지 않으면서 직관적으로 html에 data를 mapping, rendering 할 수 있도록 개발되었습니다. (data-view는 jquery를 기반으로 작성되었으며, 사용시 jquery script파일을 먼저 추가 해야합니다.)
data-view javascript 파일을 추가 한 후 아래의 순서를 따라하면 좀 더 쉽게 웹 어플리케이션을 개발 할 수 있을 것입니다.
step 1. html 태그 안에 data-view라는 속성과 식별할 id를 지정합니다.
<div data-view="dataview_id">
{{ data1 }}
{{ data2 }}
{{ data3 }}
...
...
</div>
step 2. javascript 코드 내 dataview 객체의 change 함수 혹은 append 함수로 html에 데이터를 입혀서 변경하거나 추가할 수 있습니다. ex) dataview.change(식별이름, 데이터);
// sample data (json)
var obj = {
data1 : "data number 1",
data2 : "data number 2",
data3 : "data number 3"
...
...
};
// dataview_id가 있는 곳에 obj data데이터를 입힙니다.
dataview_id.change(obj);
// 또는 dataview.change("dataview_id", obj);
결과 위 스크립트를 적용시 화면에서는 아래의 html이 적용됩니다.
<div data-view="dataview_id">
"data number 1"
"data number 2"
"data number 3"
...
...
</div>
data-view 는 위 처럼 간단한 형식 이 외에도 3항 연산, if문 형식, 함수 형식 등 간단한 코드를 html 안에 넣어 화면을 쉽게 변경 할 수 있도록 도와줍니다.
html 코드내에 아래와 같은 문법을 지원합니다.
3항 연산자{{ data1 == null ? "data1 is null" : "data1 is not null" }}
null 처리 (data1이 null인 경우 오른쪽 값을 출력){{ data1 || "data1 is null" }}
함수지원 examFunction 이라는 함수의 결과값을 출력{{ examFunction(data1) }}
if 형식의 문법 지원
{(data1 == 1) {
<span> data1은 1입니다. </span>
}(data1 == 2) {
<span> data1은 2입니다. </span>
}{
<span> data1은 1 혹은 2가 아닙니다.</span>
}}
data-view는 http://dataview.tistory.com에서 배포합니다.