data-view

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>