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>

dataview에서는 null인 데이터를 손쉽게 다른 text등 으로 대체하여 출력할 수 있습니다.

아래 예제를 참고하세요.

{{ data속성 || "데이터 없음" }}

step 1. data-view 안에 출력할 데이터에 {{ data속성 || "대체할 내용" }} 형식으로 적어줍니다.

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

step 2. 같은 방식으로 data를 변경 해 줍니다.

<script>
	var obj = {
		datetime : null
	};
	
	dataview.change("foo", obj);
</script>

결과. 

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

dataview에서는 javascript함수와 함께 출력할 수 있습니다.

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

{{ function_name(obj) }}

step 1. data-view로 지정된 태그 안에 함수와 객체의 인자로 쓰일 속성명(혹은 값)을 넣어줍니다.

<div data-view="foo" >
  {{ calc(num1, num2) }}
</div>

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

<script>
// function of calc..
function calc(n1, n2){
	return n1 + n2;
}

var obj = {
	num1 : 10,
	num2 : 20
};

// data insert
dataview.change("foo", obj);

</script>

결과. 

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

dataview에서는 3항 연산자 문법을 사용해 출력할 수 있습니다.

{{ 참 혹은 거짓 ? "true입니다." : "false입니다." }}

아래 예제를 참고하세요.

step 1. data-view 안에 출력할 데이터에 {{ 참 혹은 거짓 ? "true입니다." : "false입니다." }} 형식으로 적어줍니다.

<div data-view="foo" >
  {{ number1 == 10 ? "number1은 10입니다." : "number1은 10이 아닙니다." }}
</div>

step 2. 같은 방식으로 data를 변경 해 줍니다.

<script>
	var obj = {
		number1 : 10
	};
	
	dataview.change("foo", obj);
</script>

결과. 

<div data-view="foo" >
  number1은 10입니다.
</div>

dataview에서는 if문 형식의 문법을 사용해 출력할 수 있습니다.

아래 예제를 참고하세요.

step 1. data-view 안에 출력할 데이터에 아래와 같이 입력할 수 있습니다.

{(참 혹은 거짓1){

참 혹은 거짓1 은 참입니다. (if문)

}(참 혹은 거짓2){

참 혹은 거짓2 은 참입니다. (else if문)

}{

참 혹은 거짓1, 2 는 거짓입니다. (else 문)

}}

형식으로 적어줍니다.

<div data-view="foo" >
{(number1 + 1 == 12){
	number1 + 1은 12입니다.
{(number1 + 1 == 11){
	number1 + 1은 11입니다.
}{
	number1 + 1은 11 혹은 12가 아닙니다.
}}
</div>

step 2. data를 변경 해 줍니다.

<script>
	var obj = {
		number1 : 10
	};
	
	dataview.change("foo", obj);

</script>

결과. 

<div data-view="foo" >
	number1 + 1은 11입니다.
</div>

list의 경우 data-list attribute를 사용하는 것을 권장합니다.

list형식의 데이터의 경우 아래 함수를 통해 데이터를 출력 합니다.

change, append, prepend, update, remove 함수를 지원합니다.

dataview.change("dataview id", array-object);

지정한 데이터로 컨텐츠를 변경합니다.

dataview.append("dataview id", array-object);

뒷쪽에 데이터가 입력된 컨텐츠를 추가합니다.

dataview.prepend("dataview id", array-object);

앞쪽에 데이터가 입력된 컨텐츠를 추가합니다.

dataview.update("dataview id", data-index, object);

data-index에 해당하는 html을 update합니다.

dataview.remove("dataview id", data-index);

data-index에 해당하는 html을 remove합니다.

dataview.change("dataview id", array-object);

또는 list1.change(array-object);

지정한 데이터로 컨텐츠를 변경합니다.

아래의 html에서 

<ul>
	<li data-list="list1" data-no="{{no}}">
	{{ date }}
	</li>
<ul>

다음과 같은 array와 함수를 호출했을 경우

// object array
var listdata = [
	{no:0, date:"01-01"},
	{no:1, date:"01-02"},
	{no:2, date:"01-03"}
];

// change함수로 목록을 변경합니다.
dataview.change("list1", listdata);
// 혹은 
list1.change(listdata);

결과. 

<ul>
	<li data-list="list1" data-no="0">
	01-01
	</li>
	<li data-list="list1" data-no="1">
	01-02
	</li>
	<li data-list="list1" data-no="2">
	01-03
	</li>
<ul>

dataview.append("dataview id", array-object);

또는 list1.append(array-object);

위 상황에서 뒤쪽에 데이터를 추가하고자 하는 경우 append 함수를 이용합니다.

var listdata = [
	{no:3, date:"01-04"},
	{no:4, date:"01-05"}
];
// append list
dataview.append("list1", listdata);
// 혹은 
list1.append(listdata);

결과. 

<ul>
	...
	...
	기존 데이터 유지

	<li data-list="list1" data-no="3">
	01-04
	</li>
	<li data-list="list1" data-no="4">
	01-05
	</li>
<ul>

dataview.prepend("dataview id", array-object);

또는 list1.prepend(array-object);

앞쪽에 데이터가 입력된 컨텐츠를 추가합니다.

var listdata = [
	{no:3, date:"01-04"},
	{no:4, date:"01-05"}
];
//prepend
dataview.prepend("list1", listdata);
// 혹은 
list1.prepend(listdata);

결과. 

<ul>
	<li data-list="list1" data-no="3">
	01-04
	</li>
	<li data-list="list1" data-no="4">
	01-05
	</li>

	...
	...
	기존 데이터 유지
<ul>

dataview.update("dataview id", data-index, object);

또는 list1.update(data-index, object);

data-index에 해당하는 html을 update합니다.

기존 html 

<ul>
	<li data-list="list1" data-no="0">
	01-01
	</li>
	<li data-list="list1" data-no="1">
	01-02
	</li>
<ul>

script

var obj = {
	no:3, 
	date:"변경할 데이터"
};
// update list of 0 index
dataview.update("list1", 0, obj);
// 혹은 
list1.update(0, obj);

결과. 

<ul>
	<li data-list="list1" data-no="3">
	변경할 데이터
	</li>
	<li data-list="list1" data-no="1">
	01-02
	</li>
<ul>

dataview.remove("dataview id", data-index);

또는 list1.remove(data-index);

data-index에 해당하는 html을 remove합니다.

기존 html 

<ul>
	<li data-list="list1" data-no="0">
	01-01
	</li>
	<li data-list="list1" data-no="1">
	01-02
	</li>
<ul>

script

// remove list of 0 index
dataview.remove("list1", 0, obj);
// 혹은 
list1.remove(0);

결과. 

<ul>
	<li data-list="list1" data-no="1">
	01-02
	</li>
<ul>

html을 동적으로 로딩하고, 화면에 추가하려면 아래의 예제를 참고하세요.

loadAndChangeHtml 함수와 loadAndOverrideHtml 함수를 사용하세요.

dataview.loadAndChangeHtml(url, "로딩된 html을 추가하려는 html 객체의 쿼리셀렉터");

html을 로드 한 후 querySelector에 해당하는 tag 안에 삽입합니다.

html안에 있는 dataview 또한 적용됩니다.

step 1. div1라는 id를 가진 div tag안에 원격에 있는 새로운 html을 로드하려고 하는 경우

index.html

<div id="div1">
... contents 
</div>

remote.html

<div data-view="new_html">
  {{ @globalVar }} <br>
  {{ datetime }}
</div>

step 2-1. script에 아래와 같이 입력합니다.

// 전역변수
var globalVar = "글로벌변수입니다.";
// ./remote.html을 불러와 div1 이라는 id를 가진 태그 안에 html로 변경합니다.
dataview.loadAndChangeHtml("./remote.html", "#div1");

결과 

<div id="div1">
	<div data-view="new_html">
	글로벌변수입니다. <br>
	
	</div>
</div>

dataview.loadAndOverrideHtml(url, "로딩된 html을 추가하려는 html 객체의 쿼리셀렉터");

html을 로드 한 후 querySelector에 해당하는 tag에 덮어 씌웁니다.

html안에 있는 dataview 또한 적용됩니다.

단, 기존에 html에 덮어씌우기 때문에 id를 포함한 모든 속성이 없어집니다.

step 2-2. script에 아래와 같이 입력합니다.

// 전역변수
var globalVar = "글로벌변수입니다.";
// ./remote.html을 불러와 div1 이라는 id를 가진 테그에 덮어 씌웁니다.
dataview.loadAndOverrideHtml("./remote.html", "#div1");

결과 

<div data-view="new_html">
글로벌변수입니다. <br>

</div>

step 3. 위 화면에서 다시 change 함수를 호출하는 경우

dataview.change("new_html", {datetime : "2018-02-06"});

결과. 

<div id="div1">
	<div data-view="new_html">
	글로벌변수입니다. <br>
	2018-02-06
	</div>
</div>