data-view

step 1. Downloads에서 받은 data-view.min.js파일을 html안에 script를 추가합니다.

아래 스크립트를 추가하면 dataview라는 객체가 생성되고, 초기화 됩니다.

(dataview는 jquery를 기반으로 작성되었습니다. dataview를 사용하려면 dataview보다 먼저 jquery를 추가해야합니다.)

<!-- jquery script -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- dataview script -->
<script src="your_path/data-view.min.js"></script>

step 2. tag에 data-view 속성으로 사용할 id를 지정하고, tag안에 출력할 데이터의 속성을 {{속성}}의 형식으로 넣어 줍니다.

<div data-view="foo" >
  {{ hello }} <br>
  {{ datetime }}
</div>

step 3. javascript 코드에서 위에서 지정된 data-view의 id와 object로 해당 html을 변경 할 수 있습니다.

<script>
	var obj = {
		hello : "hello??",
		name : "my name"
	};
	
	// dataview.change 함수를 호출합니다.
	foo.change(obj);
	// 또는
	dataview.change("foo", obj);

</script>

결과. 

<div data-view="foo" >
  hello?? <br>
  my name
</div>

만약 tag의 attribute를 data-view가 아닌 다른 것으로 사용하고 싶은 경우 script태그에 아래와 같이 적으세요.

data-view가 아닌 "dv"이라는 attribute로 사용하고 싶은 경우

<script src="your_path/data-view.min.js?attr=dv"></script>

위와 같이 tag attribute를 dv설정 한 경우 data-view 대신 dv라는 attribute로 사용 할 수 있습니다.

<div dv="foo" >
  {{ hello }}
</div>

script file 로딩

만약 tag의 attribute를 data-view가 아닌 다른 것으로 사용하고 싶은 경우 script태그에 아래와 같이 적으세요.

data-view가 아닌 "dv"이라는 attribute로 사용하고 싶은 경우

<script src="your_path/data-view.min.js?attr=dv"></script>

위와 같이 attr을 dv설정 한 경우 dv를 data-view 대신 사용 할 수 있습니다.

<div dv="foo" >
  {{ hello }}
</div>

초기화 관련 변수

attr                              - "data-view" tag attribute를 다른 것으로 변경합니다.

listAttr                        - "data-list" list에서 사용하는 tag attribute를 다른 것으로 변경합니다.

                                        (list의 경우 list의 출력 에서 자세한 내용을 확인 하세요.)

noDataAttr                - "no-data-view" tag attribute를 다른 것으로 변경합니다.

createGlobalItems   -  DataViewItem의 이름을 전역변수로 사용할지 여부(true or false)

ex) <script src="your_path/data-view.min.js?attr=dv&listAttr=dl&noDataView=ndv&createGlobalItems=false"></script>

초기화가 시작되면..

data-view가 처음 로딩되면 data-view는 내용이 없는 빈 html를 출력하거나 같은 이름을 가진 no-data-view속성의 html을 출력합니다.

(만약 data-view 자체를 화면에서 없애고 싶은 경우 clear함수를 호출해야합니다.)

ex) dataview.clear("foo");

data-view는 data-view tag 속성 이외에 no-data-view라는 속성을 인식하고, 데이터가 없는 경우 해당 data-view대신 출력합니다.

<div data-view="foo">
    {{ title }}
</div>
<div no-data-view="foo">
    데이터가 없습니다.
</div>

<script>
    // dataview에 clear 함수를 적용 (혹은 null을 적용)
    dataview.clear("foo");
    // dataview.change("foo", null);

</script>

결과. 

<div no-data-view="foo">
    데이터가 없습니다.
</div>

clear함수는 데이터를 없애거나 초기화 할 때 사용할 수 있습니다.

blank 함수를 적용시

<div data-view="foo">
    {{ title }}
</div>
<div no-data-view="foo">
    데이터가 없습니다.
</div>

<script>
    // dataview에 blank 함수를 적용 시
    dataview.blank("foo");

</script>

결과. 빈값으로 data를 채웁니다. 

<div data-view="foo">
    
</div>

DataViewItem을 전역 변수로 생성해 주는 createGlobalItems

만약 dataview객체를 사용하지 않고 더 심플하게 코드를 작성하고 싶은 경우 createGlobalItems=true 로 설정하세요.(기본값 true)

<div data-view="foo" >
  {{ hello }}
</div>

로 사용 할 수 있습니다.

dataview에서는 전역변수를 출력할 수 있습니다.

다음과 같은 형식으로 입력하세요.

{{ @globalVar }}

step 1. tag에 data-view 속성으로 사용할 id를 지정하고 출력할 전역 변수를 {{@변수명}} 형식으로 적어줍니다.

<div data-view="foo" >
  {{ @globalVar }}
</div>

step 2. javascript 코드에서 위에서 지정된 data-view의 이름과 object로 해당 dataview를 변경 할 수 있습니다.

<script>
var globalVar = "전역 변수";
function testFunc(){
	dataview.change("foo", {});
}
testFunc();
</script>

결과. 

<div data-view="foo" >
  전역 변수
</div>