javascript 라이브러리 dataview를 소개합니다.html data mapping관련

사용법은 

AngularJs의 {{변수명}}이나 JSP의 ${변수}의 문법과 비슷한데..

REST API방식의 서비스연동이나 ajax로 작업 할 때 쓰시면 유용하게 작업하실 수 있을 거라고 생각됩니다.

먼저 jquery와 dataview js파일을 script로 추가하고 

html 태그 안에 data-view라는 속성과 식별할 id를 지정합니다.

<div data-view="dataview_id">
  {{ data1 }}
  {{ data2 }}
  {{ data3 }}
  ...
  ...
</div>

javascript 코드 내 dataview 객체의 change 함수 혹은 append 함수로 html에 데이터를 입혀서 변경하거나 추가할 수 있습니다. ex) dataview.change(식별이름, 데이터);

// sample data (json)
var obj = {
  data1 : "data number 1",
  data1 : "data number 2",
  data1 : "data number 3"
  ...
  ...
};


// dataview_id가 있는 곳에 obj data데이터를 입힙니다.
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 안에 넣어 화면을 쉽게 변경 할 수 있도록 도와줍니다.

자세한 내용과 다운로드는 http://dataview.tistory.com 에서 확인 하실 수 있습니다.

즐거운 프로그래밍 되세요.