data-view

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>