TagWire

TagWire

Data에 꼬리표를 붙이다.

TagWire 기초

기본 형식 : _ + Variable Name + - + Tail Function

_VariableName-TailFunction

Html 태그에 적용하는 법 : 필요한 기능 만큼 class 에 추가

class="_VariableName-TailFunction  _VariableName-TailFunction  ...  _VariableName-TailFunction"

동일한 변수로 여러가지 Tail Function을 처리하는 경우 Variable Name 생략가능 (이 경우 실행순서를 정할 수 있습니다.)

class="_test-text  _test-title  _test-id"
class="_test-text-title-id"

data-, aria-는 무조건 하나의 Tail Function으로 처리됩니다.

class="_test-data-text-title-id" // data-text-title-id="변수값" 형태로 적용된다.

데이터를 반영하는 법 : 옵션은 생략가능

TagWire.render( TARGET, DATA, OPTION );

jQuery Library를 사용하는 경우, TagWire 관련 plugin이 설정됩니다.

jQuery( TARGET ).render( DATA, OPTION );

사용자가 정의하는 Tail Function : 호출 될 때 타겟 엘리먼트, 변수값, 변수명이 파라미터로 전달됩니다.

TagWire.tail.FunctionName = function( target, value, name ) {  ...  };

아래 단어들, 특히 밑줄이 그어진 단어는 가급적이면 dataset 내에서 변수(속성)명으로 사용하지 않아야 합니다.

template array reverse topdown bottomup tidx idx i fix item new old render block capture clone hidden objdata itemdata listdata list itemtype async ready finish complete

기본 Tail Function

_변수명-태그속성 code

태그의 속성에 변수의 값을 입력합니다. Html 태그의 표준 속성은 모두 Tail Function으로 사용할 수 있으나, 비표준 속성은 태그에 선언되어 있어야 값이 적용됩니다.

[작성코드]
<a class="_test1-title _test2-href"> a 태그의 href와 title 속성이 적용된다. </a>
<a class="_test1-project"> project는 a 태그의 표준 속성이 아니므로 적용되지 않는다. </a>
<a class="_test1-project" project=""> 비표준 속성이어도 미리 선언해두면 적용된다. </a>

<script type="text/javascript">
	TagWire.render( document.body, {
		test1 : 'TagWire 예제',
		test2 : 'http://coxcore.com'
	} );
</script>
[적용된 상태]
<a class="_test1-title _test2-href" title="TagWire 예제" href="http://coxcore.com"> a 태그의 href와 title 속성이 적용된다. </a>
<a class="_test1-project"> project는 a 태그의 표준 속성이 아니므로 적용되지 않는다. </a>
<a class="_test1-project" project="TagWire 예제"> 비표준 속성이어도 미리 선언해두면 적용된다. </a>
_변수명-text code

변수의 값을 텍스트로 출력합니다.

[작성코드]
<h1 class="_test1-text">제목</h1>
<p>지금 하고 있는 것은 <span class="_test2-text">변수값 입력</span>입니다.</p>

<script type="text/javascript">
	TagWire.render( document.body, {
		test1 : '테스트1',
		test2 : '테스트2'
	} );
</script>
[적용된 상태]
<h1 class="_test1-text">테스트1</h1>
<p>지금 하고 있는 것은 <span class="_test2-text">테스트2</span>입니다.</p>
_변수명-html code

변수의 값을 html 코드로 입력합니다.

[작성코드]
<p class="_test3-html">태그입력</p>
<span class="_test4-html">태그입력</span>

<script type="text/javascript">
	TagWire.render( document.body, {
		test3 : '동해물과 백두산이<br /> 마르고 닳도록',
		test4 : '<img src="http://coxcore.com/common/img/tagwire_sym.png" alt="TagWire Logo" />'
	} );
</script>
[적용된 상태]
<p class="_test3-html">동해물과 백두산이<br /> 마르고 닳도록</p>
<span class="_test4-html"><img src="http://coxcore.com/common/img/tagwire_sym.png" alt="TagWire Logo" /></span>
_변수명-val code

변수의 값을 value에 넣습니다. 태그의 속성을 설정하는 _변수명-value와 동일한 기능을 하지만, -val은 {element}.value로 처리됩니다.

[작성코드]
<input type="hidden" class="_company-val" name="site_name1" />
<input type="hidden" class="_website-val" name="site_url1" />

<script type="text/javascript">
	TagWire.render( document.body, {
		company : 'COXCORE',
		website : 'http://coxcore.com'
	} );
</script>
[적용된 상태]
<input type="hidden" class="_company-val" name="site_name1" value="COXCORE" />
<input type="hidden" class="_website-val" name="site_url1" value="http://coxcore.com" />
_변수명-data code

변수의 값을 data-변수명 속성에 저장합니다. 만약 _변수명-data-이름 형태로 설정하면, data-이름으로 속성이 설정됩니다.
* 주의 : 변수명이나 이름은 태그의 속성으로 설정되기 때문에 대/소문자를 구분하지 않고 모두 소문자로 적용됩니다.

[작성코드]
<span id="test1" class="_project-data">데이터저장 테스트</span>
<span id="test2" class="_project-data-code_name">데이터저장 테스트</span>

<script type="text/javascript">
	TagWire.render( document.body, {
		project : 'cox.TagWire'
	} );

	console.log( jQuery("#test1").data("project") ); // 'cox.TagWire' 출력
	console.log( jQuery("#test2").data("code_name") ); // 'cox.TagWire' 출력
</script>
[적용된 상태]
<span id="test1" class="_project-data"  data-project="cox.TagWire" >데이터저장 테스트</span>
<span id="test2" class="_project-data-code_name"  data-code_name="cox.TagWire" >데이터저장 테스트</span>
_변수명-insert code

엘리먼트의 텍스트 노드에서 #변수명#으로 들어있는 부분을 변수의 값으로 변환합니다. -replace와의 차이점은 하위 엘리먼트에 영향을 주지 않고 자신의 텍스트만 변경합니다. 따라서 자식노드의 이벤트 처리 등이 유지됩니다.

[작성코드]
<span class="_libName-insert">지금 사용중인 library는 #libName# 입니다.</span>

<script type="text/javascript">
	TagWire.render( document.body, {
		libName : 'cox.TagWire.js'
	} );
</script>
[적용된 상태]
<span class="_libName-insert">지금 사용중인 library는 cox.TagWire.js 입니다.</span>
_변수명-replace code

엘리먼트 하위에 있는 모든 #변수명# 부분을 변수의 값으로 변환합니다. -insert와의 차이점은 innerHTML을 이용하여 내부 html을 다시 입력하는 방식입니다.

[작성코드]
<ul class="_libName-replace">
	<li>#libName#의 장점</li>
	<li>#libName#의 단점</li>
</ul>

<script type="text/javascript">
	TagWire.render( document.body, {
		libName : 'cox.TagWire.js'
	} );
</script>
[적용된 상태]
<ul class="_libName-replace">
	<li>cox.TagWire.js의 장점</li>
	<li>cox.TagWire.js의 단점</li>
</ul>
_변수명-attr code

태그 속성에서 #변수명#으로 들어있는 부분을 변수의 값으로 변환합니다.

[작성코드]
<a id="SITE_#site_name#" href="http://coxcore.com" class="_site_name-attr" title="#site_name# 바로가기" name="#site_name#" />홈페이지 링크</a>

<script type="text/javascript">
	TagWire.render( document.body, {
		site_name : 'COXCORE'
	} );
</script>
[적용된 상태]
<a id="SITE_COXCORE" href="http://coxcore.com" class="_site_name-attr" title="COXCORE 바로가기" name="COXCORE" />홈페이지 링크</a>
_변수명-show code

변수의 값이 true인 경우 element를 노출합니다. false인 경우는 display:none;처리 합니다.
* 변수의 값이 false로 처리되는 조건은, false, null, undefined, 0, "", "false", "null", "undefined", "0"인 경우입니다.

[작성코드]
<p class="_num1-show _num1-text"></p>
<p class="_num2-show _num2-text"></p>

<script type="text/javascript">
	TagWire.render( document.body, {
		num1 : 0,
		num2 : 25
	} );
</script>
[적용된 상태]
<p class="_num1-show _num1-text" style="display:none;" >0</p>
<p class="_num2-show _num2-text">25</p>
_변수명-hide code

-show와 반대의 처리를 합니다. 변수의 값이 true인 경우 element를 display:none; 처리합니다.
* 변수의 값이 false로 처리되는 조건은, false, null, undefined, 0, "", "false", "null", "undefined", "0"인 경우입니다.

[작성코드]
<p class="_num1-hide _num1-text"></p>
<p class="_num2-hide _num2-text"></p>

<script type="text/javascript">
	TagWire.render( document.body, {
		num1 : 0,
		num2 : 25
	} );
</script>
[적용된 상태]
<p class="_num1-hide _num1-text">0</p>
<p class="_num2-hide _num2-text" style="display:none;" >25</p>
_변수명-keep code

변수의 값이 true인 경우 element를 보존합니다. false인 경우는 삭제합니다.
* 변수의 값이 false로 처리되는 조건은, false, null, undefined, 0, "", "false", "null", "undefined", "0"인 경우입니다.

[작성코드]
<p class="_num1-keep _num1-text"></p>
<p class="_num2-keep _num2-text"></p>

<script type="text/javascript">
	TagWire.render( document.body, {
		num1 : 0,
		num2 : 25
	} );
</script>
[적용된 상태]
<p class="_num2-keep _num2-text">25</p>
_변수명-remove code

-keep과 반대의 처리를 합니다. 변수의 값이 true인 경우 element를 삭제합니다. false인 경우는 보존합니다.
* 변수의 값이 false로 처리되는 조건은, false, null, undefined, 0, "", "false", "null", "undefined", "0"인 경우입니다.

[작성코드]
<p class="_num1-remove _num1-text"></p>
<p class="_num2-remove _num2-text"></p>

<script type="text/javascript">
	TagWire.render( document.body, {
		num1 : 0,
		num2 : 25
	} );
</script>
[적용된 상태]
<p class="_num1-remove _num1-text">0</p>
_변수명-setClass code

변수의 값이 true인 경우, 변수명을 class로 추가합니다. false인 경우 변수명을 class에서 삭제합니다. -_setClass 형태로 _를 붙이면 반대로 false일때 class를 추가합니다.
* 변수의 값이 false로 처리되는 조건은, false, null, undefined, 0, "", "false", "null", "undefined", "0"인 경우입니다.

[작성코드]
<p class="_sample1-setClass"></p>
<p class="_sample2-setClass sample2"></p>

<script type="text/javascript">
	TagWire.render( document.body, {
		sample1 : true,
		sample2 : false
	} );
</script>
[적용된 상태]
<p class="_sample1-setClass sample1"></p>
<p class="_sample2-setClass"></p>
_변수명-addClass code

변수의 값을 class에 추가합니다.

[작성코드]
<p class="_sample1-addClass"></p>
<p class="_sample2-addClass"></p>

<script type="text/javascript">
	TagWire.render( document.body, {
		sample1 : 'activate',
		sample2 : 'deactivate'
	} );
</script>
[적용된 상태]
<p class="_sample1-addClass activate"></p>
<p class="_sample2-addClass deactivate"></p>
_변수명-removeClass code

변수의 값과 동일한 class를 삭제합니다.

[작성코드]
<p class="_sample1-removeClass activate deactivate"></p>
<p class="_sample2-removeClass activate deactivate"></p>

<script type="text/javascript">
	TagWire.render( document.body, {
		sample1 : 'activate',
		sample2 : 'deactivate'
	} );
</script>
[적용된 상태]
<p class="_sample1-removeClass daactivate"></p>
<p class="_sample2-removeClass activate"></p>
_변수명-log code

브라우저의 console에 현재 element와 변수값을 출력해줍니다. TagWire가 제대로 동작하는지 확인을 하기 위해 사용할 수 있습니다.

[작성코드]
<p class="_test-log"></p>

<script type="text/javascript">
	TagWire.render( document.body, {
		test : 'log 테스트입니다.'
	} );
</script>
[console.log에 출력된 내용]
[TagWire:_test-log] 
- target : <p class=​"_test-log"></p>​
- value : "log 테스트입니다."

사용자 정의 Tail Function

TagWire.tail.함수명 code

기본적으로 정의된 -text, -html 같은 Tail Function을 사용자가 정의할 수 있습니다. TagWire.tail에 선언 하는 사용자 정의 함수는 기본 Tail Function이 실행 된 후에 실행됩니다. 만약 내장 함수와 동일한 이름으로 정의하는 경우, 내장 함수에 override됩니다. 정의한 함수를 삭제하면 다시 내장 함수가 동작됩니다.

[작성코드]
<p class="_msgNum1-message"></p>
<p class="_msgNum2-message"></p>

<script type="text/javascript">
	TagWire.tail.message = function( target, value, name ) {
		// target : 적용할 엘리먼트
		// value : 적용할 데이터
		// name : 데이터의 변수명

		if (value != 0) {
			var msg = value + "개의 메시지가 있습니다.";
		} else {
			var msg = "수신된 메시지가 없습니다.";
		}
		$(target).text(msg);
	};

	TagWire.render( document.body, {
		msgNum1 : 0,
		msgNum2 : 5
	} );

</script>
[적용된 상태]
<p class="_msgNum1-message">수신된 메시지가 없습니다.</p>
<p class="_msgNum2-message">5개의 메시지가 있습니다.</p>
데이터 가공 code

사용자 정의 tail 함수의 리턴값은 연달아 사용하는 다음 tail함수의 value에 전달됩니다. 만약 리턴값이 없거나 undefined인 경우는 앞에서 전달된 값을 그대로 다음으로 전달합니다.

[작성코드]
<p class="_cost-text"></p>
<p class="_cost-numFormat-text"></p>
<p class="_cost-numFormat-won-text"></p>
<p class="_cost-title-numFormat-won-text"></p>
<input type="hidden" class="_cost-numFormat-value" />

<script type="text/javascript">
	TagWire.tail.numFormat = function( target, value, name ) {
		// 3자리수 , 처리
		return Number(value).toLocaleString();
	};

	TagWire.tail.won = function( target, value, name ) {
		// 금액 뒤에 '원' 글자 추가
		return value + '원';
	};

	TagWire.render( document.body, {
		cost : 7800
	} );

</script>
[적용된 상태]
<p class="_cost-text">7800</p>
<p class="_cost-numFormat-text">7,800</p>
<p class="_cost-numFormat-won-text">7,800원</p>
<p class="_cost-title-numFormat-won-text" title="7800">7,800원</p>
<input type="hidden" class="_cost-numFormat-value" value="7,800" />

객체 사용과 범위 제한

_객체명 code

Object나 array 내부의 값을 사용하기 위해서는, 사용하려는 element에 _객체명 형태로 선언을 해야합니다. 이렇게 선언된 element와 그 하위에서만 해당 object 내부의 값들을 사용할 수 있게 됩니다.

[작성코드]
<div class="_objValue1-text">객체의 범위 밖이기 때문에 데이터를 사용 할 수 없다.</div>

<div class="_testObj">
	<p class="_objValue1-text">객체명을 설정한 엘리먼트의 자식이므로 객체의 값이 처리된다.</p>
	<ul>
		<li class="_objValue2-text">객체의 범위 내에 있으므로 마찬가지로 값이 처리된다.</li>
	</ul>
</div>
<script type="text/javascript">
	TagWire.render( document.body, {
		testObj : {
			objValue1 : '객체 데이터1',
			objValue2 : '객체 데이터2'
		}
	} );
</script>
[적용된 상태]
<div class="_objValue1-text">객체의 범위 밖이기 때문에 데이터를 사용 할 수 없다.</div>

<div class="_testObj">
	<p class="_objValue1-text">객체 데이터1</p>
	<ul>
		<li class="_objValue2-text">객체 데이터2</li>
	</ul>
</div>
적용 범위의 제한 code

데이터를 적용할 element를 지정하면, 해당 element에서만 render하는 데이터를 사용 할 수 있습니다.

[작성코드]
<div class="_pgValue-text">ul 태그 범위 밖이므로 사용할 수 없다.</div>
<div>
<p class="_pgValue-text">ul 태그 범위 밖이므로 사용할 수 없다.</p>
	<ul>
		<li class="_pgValue-text">ul 의 자식 엘리먼트이므로 값이 처리된다.</li>
	</ul>
</div>

<script type="text/javascript">
	TagWire.render( document.getElementsByTagName("ul"), {
		pgValue : '값 변경'
	} );

	// jQuery를 사용하는 경우
	jQuery("ul").render( {
		pgValue : '값 변경'
	} );
</script>
[적용된 상태]
<div class="_pgValue-text">ul 태그 범위 밖이므로 사용할 수 없다.</div>
<div>
	<p class="_pgValue-text">ul 태그 범위 밖이므로 사용할 수 없다.</p>
	<ul>
		<li class="_pgValue-text">값 변경</li>
	</ul>
</div>
global 객체 code

Object의 변수명이 global이면, render 할 다른 데이터를 우선적으로 적용한 후 global 데이터를 처리합니다. 예를 들어 _template 처럼 동적으로 생성되는 element에 공통된 값을 적용해야 하는 경우 사용할 수 있습니다.

[작성코드]
<div>
	<ul class="_sample _sample-list">
		<li class="_template _path-insert _page-insert">#path##page#</li>
	</ul>
</div>

<script type="text/javascript">
	TagWire.render( document.getElementsByTagName( "ul" ), {
		sample : [
			{ page : 'page_1' },
			{ page : 'page_2' },
			{ page : 'page_3' }
		],
		global : {
			path : '/root_path/'
		}
	} );
</script>
[적용된 상태]
<div>
	<ul>
		<li class="_item _new _path-insert _page-insert">/root_path/page_1</li>
		<li class="_item _new _path-insert _page-insert">/root_path/page_2</li>
		<li class="_item _new _path-insert _page-insert">/root_path/page_3</li>
	</ul>
</div>
_객체명-async code

Render하는 object 나 array 데이터가 화면에 즉시 반영되지 않아도 되는 경우는, 다른 부분의 처리가 우선되도록 _async 옵션을 이용하여 비동기로 처리할 수 있습니다.

[작성코드]
<div>
	<p class="_testData _asyncVal-log _testData-async">비동기 처리</p>
	<p class="_testData _syncVal-log">동기 처리</p>
</div>

<script type="text/javascript">

	TagWire.render( document.body, {
		testData : {
			syncVal : '동기 처리',
			asyncVal : '비동기 처리'
		}
	} );

	console.log( 'Render 다음줄 실행' );

</script>
[console.log 출력 내용]
[TagWire:_syncVal-log] 
- target : <p class="_testData _syncVal_log">...</p>
- value : "동기 처리"
-------------------------------------------------------------------------
"Render 다음줄 실행"
-------------------------------------------------------------------------
[TagWire:_asyncVal-log] 
- target : <p class="_testData _asyncVal_log _testData_async">...</p>
- value : "비동기 처리"
_객체명-render code

Object 데이터를 해당 element에 render 해줍니다. 배열의 인자가 object일 때, 별도로 render 처리하는 용도 등으로 사용할 수 있습니다.

[작성코드]
<div class="_arrData _array">
	<p class="_arrData-0-render _testVal-text"></p>
	<p class="_arrData-1-render _testVal-text"></p>
</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		arrData : [
			{ testVal : '첫번째 인자 데이터' },
			{ testVal : '두번째 인자 데이터' }
		]
	} );
</script>
[console.log 출력 내용]
<div class="_arrData _array">
	<p class="_arrData-0-render _testVal-text">첫번째 인자 데이터</p>
	<p class="_arrData-1-render _testVal-text">두번째 인자 데이터</p>
</div>
_block code

_block 옵션이 설정된 element는, 해당 element에 설정된 모든 object 무력화 시켜 데이터가 반영되지 않게 막습니다. 상위나, 하위에서 선언된 object는 막지 않습니다.

[작성코드]
<div class="_testObj1 _testObj2">
	<p class="_objValue1-text">block 처리를 하지 않아서 값이 적용된다.</p>
	<p class="_objValue2-text">block 처리를 하지 않아서 값이 적용된다.</p>
</div>
<div class="_testObj1 _testObj2 _block">
	<p class="_objValue1-text">block 처리로 값이 적용되지 않는다.</p>
	<p class="_objValue2-text">block 처리로 값이 적용되지 않는다.</p>
</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		testObj1 : {
			objValue1 : '객체 데이터1'
		},
		testObj2 : {
			objValue2 : '객체 데이터2'
		}
	} );
</script>
[적용된 상태]
<div class="_testObj1 _testObj2">
	<p class="_objValue1-text">객체 데이터1</p>
	<p class="_objValue2-text">객체 데이터2</p>
</div>
<div class="_testObj1 _testObj2 _block">
	<p class="_objValue1-text">block 처리로 값이 적용되지 않는다.</p>
	<p class="_objValue2-text">block 처리로 값이 적용되지 않는다.</p>
</div>

배열과 리스트의 구성

_배열-함수명 code

배열의 길이값을 사용할 수 있습니다. Object 하위 데이터와 마찬가지로, _배열이 추가된 엘리먼트 범위내에서 사용가능합니다.

[작성코드]
<div class="_userData">
	<p>총 <span class="_userData-text">0</span>개의 리스트가 있습니다.</p>
</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		userData : [ "호랑이", "사자", "코끼리", "기린", "코뿔소", "얼룩말" ]
	} );
</script>
[적용된 상태]
<div class="_userData">
	<p>총 <span class="_userData-text">6</span>개의 리스트가 있습니다.</p>
</div>
_배열-list code

Array를 이용한 반복적인 태그 구조를 만들기 위해, 리스트의 컨테이너가 될 element에 -list를 선언합니다. Array도 object처럼, 리스트를 선언한 element나 그 상위의 element에서 array 변수명을 선언해서 사용할 범위를 지정해야 합니다.
리스트를 만들기 위해서 꼭 ul, ol, dl 같은 태그를 사용할 필요는 없습니다. 어떤 태그도 사용가능합니다.

[작성코드]
<div class="_userData">
	<h3>userData 배열로 반복되는 태그 만들기</h3>
	<ul class="_userData-list">
		<li class="_template">배열의 수만큼 생성 될 엘리먼트</li>
	</ul>
</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		userData : [ "호랑이", "사자", "코끼리", "기린", "코뿔소", "얼룩말" ]
	} );
</script>
[적용된 상태]
<div class="_userData">
	<h3>userData 배열로 반복되는 태그 만들기</h3>
	<ul class="_userData-list">
		<script type="text/tw-template"></script>
		<li class="_item _new">배열의 수만큼 생성 될 엘리먼트</li>
		<li class="_item _new">배열의 수만큼 생성 될 엘리먼트</li>
		<li class="_item _new">배열의 수만큼 생성 될 엘리먼트</li>
		<li class="_item _new">배열의 수만큼 생성 될 엘리먼트</li>
		<li class="_item _new">배열의 수만큼 생성 될 엘리먼트</li>
		<li class="_item _new">배열의 수만큼 생성 될 엘리먼트</li>
	</ul>
</div>
_배열-인덱스-함수명 code

배열의 요소값을 사용하려면 배열의 변수명 뒤에 index를 붙인 상태로 처리합니다. 예를 들어 첫번째 인자를 사용하려면 _배열-0-함수명 형태가 됩니다. 이 기능은 컨테이너 엘리먼트에 _array가 선언되어 있어야합니다.

[작성코드]
<div class="_userData _array">
	<span class="_userData-0-text"></span>
	<p class="_userData-2-text"></p>
	<div>
		<p class="_userData-4-text"></p>
	</div>
</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		userData : [ "호랑이", "사자", "코끼리", "기린", "코뿔소", "얼룩말" ]
	} );
</script>
[적용된 상태]
<div class="_userData _array">
	<span class="_userData-0-text">호랑이</span>
	<p class="_userData-2-text">코끼리</p>
	<div>
		<p class="_userData-4-text">코뿔소</p>
	</div>
</div>
_item-함수명 code

리스트를 생성한 상태에서 array의 데이터를 element에 반영하는 방법은 3종류가 있습니다.
인자가 string, number, boolean 으로 구성된 경우, 인자값을 참조하기 위한 변수명이 없기 때문에, _item 키워드를 이용합니다.
인자가 object 인 경우는 해당 object 내에 있는 변수를 그대로 사용합니다.
인자가 array 인 경우는 _item-list 내용을 참고하세요.

[작성코드]
<div class="_userData _carInfo">

	<ul class="_userData-list">
		<li class="_template _item-text">배열의 수만큼 생성 될 엘리먼트</li>
	</ul>

	<div class="_carInfo-list">
		<p class="_template">- 모델 : <span class="_model-text">모델명</span>(<span class="_brand-text">제조사</span>)</p>
	</div>

</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		userData : [ "호랑이", "사자", "코끼리", "기린", "코뿔소", "얼룩말" ],
		carInfo : [
			{ model : "싼타페", brand : "현대" },
			{ model : "쏘렌토", brand : "기아" },
			{ model : "윈스톰", brand : "쉐보레" },
			{ model : "QM5", brand : "르노삼성" }
		]
	} );
</script>
[적용된 상태]
<div class="_userData _carInfo">

	<ul class="_userData-list">
		<script type="text/tw-template"></script>
		<li class="_item _new _item-text">호랑이</li>
		<li class="_item _new _item-text">사자</li>
		<li class="_item _new _item-text">코끼리</li>
		<li class="_item _new _item-text">기린</li>
		<li class="_item _new _item-text">얼룩말</li>
	</ul>

	<div class="_carInfo-list">
		<script type="text/tw-template"></script>
		<p class="_item _new">- 모델 : <span class="_model-text">싼타페</span>(<span class="_brand-text">현대</span>)</p>
		<p class="_item _new">- 모델 : <span class="_model-text">쏘렌토</span>(<span class="_brand-text">기아</span>)</p>
		<p class="_item _new">- 모델 : <span class="_model-text">윈스톰</span>(<span class="_brand-text">쉐보레</span>)</p>
		<p class="_item _new">- 모델 : <span class="_model-text">QM5</span>(<span class="_brand-text">르노삼성</span>)</p>
	</div>

</div>
_item-list code

다중배열인 경우, 리스트를 생성한 element 하위에서 다시 리스트를 생성할 수 있습니다.

[작성코드]
<div class="_userData  _userData-list">
	<ul class="_template _item-list">
		<li class="_template _item-text"></li>
	</ul>
</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		userData : [
			['a', 'b', 'c'],
			['d', 'e', 'f', 'g'],
			['h', 'i']
		]
	} );
</script>
[적용된 상태]
<div class="_userData  _userData-list">
	<script type="text/tw-template"></script>
	<ul class="_item-list _item _new">
		<script type="text/tw-template"></script>
		<li class="_item-text _item _new">a</li>
		<li class="_item-text _item _new">b</li>
		<li class="_item-text _item _new">c</li>
	</ul>
	<ul class="_item-list _item _new">
		<script type="text/tw-template"></script>
		<li class="_item-text _item _new">d</li>
		<li class="_item-text _item _new">e</li>
		<li class="_item-text _item _new">f</li>
		<li class="_item-text _item _new">g</li>
	</ul>
	<ul class="_item-list _item _new">
		<script type="text/tw-template"></script>
		<li class="_item-text _item _new">h</li>
		<li class="_item-text _item _new">i</li>
	</ul>
</div>
_i-함수명 code

0부터 시작하는 index를 사용할 수 있습니다.

[작성코드]
<ul class="_userData _userData-list">
	<li id="list#i#" class="_template _i-attr"><span class="_i-text">배열인덱스</span>. <span class="_item-text">배열 값</span></li>
</ul>

<script type="text/javascript">
	TagWire.render( document.body, {
		userData : [ "호랑이", "사자", "코끼리", "기린", "코뿔소", "얼룩말" ]
	} );
</script>
[적용된 상태]
<ul class="_userData _userData-list">
	<script type="text/tw-template"></script>
	<li id="list0" class="_item _new _i-attr"><span class="_i-text">0</span>. <span class="_item-text">호랑이</span></li>
	<li id="list1" class="_item _new _i-attr"><span class="_i-text">1</span>. <span class="_item-text">사자</span></li>
	<li id="list2" class="_item _new _i-attr"><span class="_i-text">2</span>. <span class="_item-text">코끼리</span></li>
	<li id="list3" class="_item _new _i-attr"><span class="_i-text">3</span>. <span class="_item-text">기린</span></li>
	<li id="list4" class="_item _new _i-attr"><span class="_i-text">4</span>. <span class="_item-text">코뿔소</span></li>
	<li id="list5" class="_item _new _i-attr"><span class="_i-text">5</span>. <span class="_item-text">얼룩말</span></li>
</ul>
_idx-함수명 code

1부터 시작하는 index를 사용할 수 있습니다.

[작성코드]
<ul class="_userData _userData-list">
	<li id="list#idx#" class="_template _idx-attr"><span class="_idx-text">배열인덱스</span>. <span class="_item-text">배열 값</span></li>
</ul>

<script type="text/javascript">
	TagWire.render( document.body, {
		userData : [ "호랑이", "사자", "코끼리", "기린", "코뿔소", "얼룩말" ]
	} );
</script>
[적용된 상태]
<ul class="_userData _userData-list">
	<script type="text/tw-template"></script>
	<li id="list1" class="_item _new _idx-attr"><span class="_idx-text">1</span>. <span class="_item-text">호랑이</span></li>
	<li id="list2" class="_item _new _idx-attr"><span class="_idx-text">2</span>. <span class="_item-text">사자</span></li>
	<li id="list3" class="_item _new _idx-attr"><span class="_idx-text">3</span>. <span class="_item-text">코끼리</span></li>
	<li id="list4" class="_item _new _idx-attr"><span class="_idx-text">4</span>. <span class="_item-text">기린</span></li>
	<li id="list5" class="_item _new _idx-attr"><span class="_idx-text">5</span>. <span class="_item-text">코뿔소</span></li>
	<li id="list6" class="_item _new _idx-attr"><span class="_idx-text">6</span>. <span class="_item-text">얼룩말</span></li>
</ul>
_tidx-함수명 code

1부터 시작하는 고유한 index를 사용할 수 있습니다. i나 idx는 리스트가 새로 생성되면 항상 0 혹은 1로 시작하지만, tidx는 지금까지 뿌려진 template의 수가 누적되어 증가합니다. _bottomup 옵션이 있으면 아래부터 위로 갈 수록 숫자가 커집니다.

[작성코드]
<ul class="_userData _userData-list _bottomup">
	<li id="list#tidx#" class="_template _tidx-attr"><span class="_tidx-text">배열인덱스</span>. <span class="_item-text">배열 값</span></li>
</ul>

<script type="text/javascript">
	TagWire.render( document.body, {
		userData : [ "호랑이", "사자", "코끼리", "기린", "코뿔소", "얼룩말" ]
	} );

	TagWire.render( document.body, {
		userData : [ "고래", "상어", "바다표범", "돌고래" ]
	} );
</script>
[적용된 상태]
<ul class="_userData _userData-list _bottomup">
	<script type="text/tw-template"></script>
	<li id="list10" class="_tidx-attr _item _new"><span class="_tidx-text">10</span>. <span class="_item-text">고래</span></li>
	<li id="list9" class="_tidx-attr _item _new"><span class="_tidx-text">9</span>. <span class="_item-text">상어</span></li>
	<li id="list8" class="_tidx-attr _item _new"><span class="_tidx-text">8</span>. <span class="_item-text">바다표범</span></li>
	<li id="list7" class="_tidx-attr _item _new"><span class="_tidx-text">7</span>. <span class="_item-text">돌고래</span></li>
	<li id="list6" class="_tidx-attr _item _old"><span class="_tidx-text">6</span>. <span class="_item-text">호랑이</span></li>
	<li id="list5" class="_tidx-attr _item _old"><span class="_tidx-text">5</span>. <span class="_item-text">사자</span></li>
	<li id="list4" class="_tidx-attr _item _old"><span class="_tidx-text">4</span>. <span class="_item-text">코끼리</span></li>
	<li id="list3" class="_tidx-attr _item _old"><span class="_tidx-text">3</span>. <span class="_item-text">기린</span></li>
	<li id="list2" class="_tidx-attr _item _old"><span class="_tidx-text">2</span>. <span class="_item-text">코뿔소</span></li>
	<li id="list1" class="_tidx-attr _item _old"><span class="_tidx-text">1</span>. <span class="_item-text">얼룩말</span></li>
</ul>
_listdata-함수명 code

배열데이터를 사용합니다. -list로 선언한 element에서만 사용할 수 있습니다.

[작성코드]
<div class="_userData">
	<ul class="_userData-list _listdata-log">
		<li class="_template _item-text">배열의 수만큼 생성 될 엘리먼트</li>
	</ul>
</div>
_itemdata-함수명 code

배열의 인자 데이터를 사용합니다. _template로 선언한 element에서만 사용할 수 있습니다.

[작성코드]
<div class="_userData">
	<ul class="_userData-list">
		<li class="_template _itemdata-log"></li>
	</ul>
</div>
_변수명-itemtype code

하나의 리스트에 선언된 여러개의 template중, 변수의 값에 따라 동적으로 선택하여 추가할 수 있습니다.

[작성코드]
<div class="_testData _testData-list">
	<p class="_template _isImage-itemtype" data-itemtype="true">
		<img class="_urlValue-src" />
	</p>
	<p class="_template _isImage-itemtype" data-itemtype="false">
		<a class="_urlValue-text _urlValue-href"></a>
	</p>
</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		testData : [
			{ isImage : false, urlValue : 'http://coxcore.com/tagwire/' },
			{ isImage : true, urlValue : 'http://coxcore.com/common/img/tagwire_sym.png' },
			{ isImage : false, urlValue : 'http://coxcore.com/remog/' },
			{ isImage : true, urlValue : 'http://coxcore.com/common/img/cox_s.png' }
		]
	} );
</script>
[적용된 상태]
<div class="_testData _testData-list">
	<script type="text/tw-template"></script>
	<script type="text/tw-template"></script>
	<p class="_isImage-itemtype _item _new" data-itemtype="false">
		<a class="_urlValue-text _urlValue-href" href="http://coxcore.com/tagwire/">http://coxcore.com/tagwire/</a>
	</p>
	<p class="_isImage-itemtype _item _new" data-itemtype="true">
		<img class="_urlValue-src" src="http://coxcore.com/common/img/tagwire_sym.png" />
	</p>
	<p class="_isImage-itemtype _item _new" data-itemtype="false">
		<a class="_urlValue-text _urlValue-href" href="http://coxcore.com/remog/">http://coxcore.com/remog/</a>
	</p>
	<p class="_isImage-itemtype _item _new" data-itemtype="true">
		<img class="_urlValue-src" src="http://coxcore.com/common/img/cox_s.png" />
	</p>
</div>
_template code

리스트에서 반복적으로 표시 할 element에 선언합니다. -list의 자식노드만 선언할 수 있으며, 어떠한 형태라도 상관 없습니다.

[작성코드]
<div class="_userData">

	<ul class="_userData-list">
		<li>일반 엘리먼트</li>
		<li class="_template">배열의 수만큼 생성 될 LI 엘리먼트</li>
		<li>일반 엘리먼트</li>
	</ul>

	<div class="_userData-list">
		<p>일반 엘리먼트</p>
		<p class="_template">배열의 수만큼 생성 될 P 엘리먼트</p>
		<p>일반 엘리먼트</p>
	</div>

</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		userData : [ 1, 2, 3, 4 ]
	} );
</script>
[적용된 상태]
<div class="_userData">

	<ul class="_userData-list">
		<li>일반 엘리먼트</li>
		<script type="text/tw-template"></script>
		<li class="_item _new">배열의 수만큼 생성 될 LI 엘리먼트</li>
		<li class="_item _new">배열의 수만큼 생성 될 LI 엘리먼트</li>
		<li class="_item _new">배열의 수만큼 생성 될 LI 엘리먼트</li>
		<li class="_item _new">배열의 수만큼 생성 될 LI 엘리먼트</li>
		<li>일반 엘리먼트</li>
	</ul>

	<div class="_userData-list">
		<p>일반 엘리먼트</p>
		<script type="text/tw-template"></script>
		<p class="_item _new">배열의 수만큼 생성 될 P 엘리먼트</p>
		<p class="_item _new">배열의 수만큼 생성 될 P 엘리먼트</p>
		<p class="_item _new">배열의 수만큼 생성 될 P 엘리먼트</p>
		<p class="_item _new">배열의 수만큼 생성 될 P 엘리먼트</p>
		<p>일반 엘리먼트</p>
	</div>

</div>
_array code

배열의 요소값을 개별적으로 사용 할 때, 해당 컨테이너에 _array를 선언해야 합니다.

[작성코드]
<div class="_userData _array">
	<div>
		<p class="_userData-0-text"></p>
	</div>
</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		userData : [ "호랑이", "사자", "코끼리", "기린", "코뿔소", "얼룩말" ]
	} );
</script>
[적용된 상태]
<div class="_userData _array">
	<div>
		<p class="_userData-0-text">호랑이</p>
	</div>
</div>
_topdown code

이 옵션를 선언한 리스트는 배열을 render할 때, 기존에 생성된 리스트를 삭제하지 않고, 그 하단에 계속해서 추가합니다.

[작성코드]
<div class="_userData">

	<p>_topdown 적용함</p>
	<ul class="_userData-list _topdown">
		<li class="_template _item-text"></li>
	</ul>

	<p>_topdown 적용하지 않음</p>
	<ul class="_userData-list">
		<li class="_template _item-text"></li>
	</ul>

</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		userData : [ "A", "B", "C" ]
	} );

	TagWire.render( document.body, {
		userData : [ "D", "E", "F" ]
	} );
</script>
[적용된 상태]
<div class="_userData">

	<p>_topdown 적용함</p>
	<ul class="_userData-list _topdown">
		<script type="text/tw-template"></script>
		<li class="_item-text _item _old">A</li>
		<li class="_item-text _item _old">B</li>
		<li class="_item-text _item _old">C</li>
		<li class="_item-text _item _new">D</li>
		<li class="_item-text _item _new">E</li>
		<li class="_item-text _item _new">F</li>
	</ul>

	<p>_topdown 적용하지 않음</p>
	<ul class="_userData_list">
		<script type="text/tw-template"></script>
		<li class="_item-text _item _new">D</li>
		<li class="_item-text _item _new">E</li>
		<li class="_item-text _item _new">F</li>
	</ul>

</div>
_bottomup code

이 옵션를 선언한 리스트는 배열을 render할 때, 기존에 생성된 리스트를 삭제하지 않고, 그 상단에 계속해서 추가합니다. 보통 가장 최근의 리스트가 상단에 표시되는 경우 사용합니다. 단, 배열의 순서는 전달된 순서대로 표시되므로, 순서를 뒤집어야 하는 경우 _reverse 옵션를 사용합니다.

[작성코드]
<div class="_userData">

	<p>_bottomup 적용함</p>
	<ul class="_userData-list _bottomup">
		<li class="_template _item-text"></li>
	</ul>

	<p>_bottomup 적용하지 않음</p>
	<ul class="_userData-list">
		<li class="_template _item-text"></li>
	</ul>

</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		userData : [ "A", "B", "C" ]
	} );

	TagWire.render( document.body, {
		userData : [ "D", "E", "F" ]
	} );
</script>
[적용된 상태]
<div class="_userData">

	<p>_bottomup 적용함</p>
	<ul class="_userData-list _bottomup">
		<script type="text/tw-template"></script>
		<li class="_item-text _item _old">D</li>
		<li class="_item-text _item _old">E</li>
		<li class="_item-text _item _old">F</li>
		<li class="_item-text _item _new">A</li>
		<li class="_item-text _item _new">B</li>
		<li class="_item-text _item _new">C</li>
	</ul>

	<p>_bottomup 적용하지 않음</p>
	<ul class="_userData_list">
		<script type="text/tw-template"></script>
		<li class="_item-text _item _new">D</li>
		<li class="_item-text _item _new">E</li>
		<li class="_item-text _item _new">F</li>
	</ul>

</div>
_reverse code

배열을 역순으로 반영합니다.

[작성코드]
<div class="_userData">

	<p>_reverse 적용함</p>
	<ul class="_userData-list _reverse">
		<li class="_template _item-text"></li>
	</ul>

	<p>_reverse 적용하지 않음</p>
	<ul class="_userData-list">
		<li class="_template _item-text"></li>
	</ul>

</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		userData : [ "A", "B", "C" ]
	} );
</script>
[적용된 상태]
<div class="_userData">

	<p>_reverse 적용함</p>
	<ul class="_userData-list _reverse">
		<script type="text/tw-template"></script>
		<li class="_item-text _item _new">C</li>
		<li class="_item-text _item _new">B</li>
		<li class="_item-text _item _new">A</li>
	</ul>

	<p>_reverse 적용하지 않음</p>
	<ul class="_userData-list">
		<script type="text/tw-template"></script>
		<li class="_item-text _item _new">A</li>
		<li class="_item-text _item _new">B</li>
		<li class="_item-text _item _new">C</li>
	</ul>

</div>
_fix갯수 code

리스트를 지정한 수만큼 제한합니다.

[작성코드]
<div class="_userData">

	<p>_topdown 적용</p>
	<ul class="_userData-list _topdown _fix4">
		<li class="_template _item-text"></li>
	</ul>

	<p>_bottomup 적용</p>
	<ul class="_userData-list _bottomup _fix4">
		<li class="_template _item-text"></li>
	</ul>

</div>

<script type="text/javascript">

	TagWire.render( document.body, {
		userData : [ "A", "B", "C" ]
	} );

	TagWire.render( document.body, {
		userData : [ "D", "E", "F" ]
	} );

</script>
[적용된 상태]
<div class="_userData">

	<p>_topdown 적용</p>
	<ul class="_userData-list _topdown _fix4">
		<script type="text/tw-template"></script>
		<li class="_item-text _item _old">C</li>
		<li class="_item-text _item _new">D</li>
		<li class="_item-text _item _new">E</li>
		<li class="_item-text _item _new">F</li>
	</ul>

	<p>_bottomup 적용</p>
	<ul class="_userData-list _bottomup _fix4">
		<script type="text/tw-template"></script>
		<li class="_item-text _item _new">D</li>
		<li class="_item-text _item _new">E</li>
		<li class="_item-text _item _new">F</li>
		<li class="_item-text _item _old">A</li>
	</ul>

</div>
_item, _new, _old code

이 키워드는 리스트가 생성될 때 자동으로 추가됩니다. _item은 생성된 모든 리스트에 추가되고, _new는 가장 마지막에 render한 리스트에 추가되며, _old는 마지막 render 직전까지 추가되어 있던 리스트입니다.

[작성코드]
<div class="_userData">
	<ul class="_userData-list _topdown">
		<li class="_template _item-text">배열의 수만큼 생성 될 LI 엘리먼트</li>
	</ul>
</div>

<script type="text/javascript">

	TagWire.render( document.body, {
		userData : [ 1, 2, 3 ]
	} );

	TagWire.render( document.body, {
		userData : [ 4, 5, 6 ]
	} );

</script>
[적용된 상태]
<div class="_userData">
	<ul class="_userData-list _topdown">
		<script type="text/tw-template"></script>
		<li class="_item _old _item-text">1</li>
		<li class="_item _old _item-text">2</li>
		<li class="_item _old _item-text">3</li>
		<li class="_item _new _item-text">4</li>
		<li class="_item _new _item-text">5</li>
		<li class="_item _new _item-text">6</li>
	</ul>
</div>

Element 원형 복구

_capture code

원래 상태를 보존해야 할 필요가 있는 경우 _capture 옵션을 추가합니다. 이 옵션이 있는 경우 최초 render 시점에 변형하기 전 형태를 저장합니다. 원형이 저장된 상태가 되면 _capture class는 삭제하고, _clone class가 추가됩니다.

[작성코드]
<div>
	<p class="_capture">테스트</p>
</div>

<script type="text/javascript">
	TagWire.render( document.body, {} );
</script>
[적용된 상태]
<div>
	<script type="text/dw-capture"></script>
	<p class="_clone">테스트</p>
</div>
_변수명-restore

변수의 값이 true면, 해당 element를 삭제하고 _capture로 저장한 원형으로 교체합니다. -_restore 형태로 사용하면 false일 때 복구합니다.

_변수명-restoreAttr

변수의 값이 true면, 해당 element의 모든 속성값을 _capture로 저장한 원형으로 복구합니다. -_restoreAttr 형태로 사용하면 false일 때 복구합니다.

_변수명-restoreText

변수의 값이 true면, 해당 element의 내용을 _capture로 저장한 원형의 내용으로 교체합니다. -_restoreText 형태로 사용하면 false일 때 복구합니다.

_변수명-restoreHtml

변수의 값이 true면, 해당 element의 html 태그를 _capture로 저장한 원형으로 교체합니다. -_restoreHtml 형태로 사용하면 false일 때 복구합니다.

_변수명-restoreChild

변수의 값이 true면, 해당 element를 자식 노드를 _capture로 저장한 원형으로 교체합니다. -_restore 형태로 사용하면 false일 때 복구합니다.

TagWire CSS

_template, _capture

_template과 _capture는 항상 display:none; 상태로 숨겨집니다.

_hidden code

데이터를 바인딩 하기 전 상태를 화면에 노출하지 않을 때 사용합니다. render 메서드를 호출하면, 해당 엘리먼트 내의 모든 _hidden 클래스는 제거됩니다.

[작성코드]
<div class="_hidden">
	<p class="_desc-text">데이터를 바인딩 하기 전에는 이 영역이 보이지 않습니다.</p>
</div>

<script type="text/javascript">
	TagWire.render( document.body, {
		desc : 'render 메서드를 이용해 데이터 바인딩'
	} );
</script>
[적용된 상태]
<div class="">
	<p class="_desc-text">render 메서드를 이용해 데이터 바인딩</p>
</div>

이벤트 처리

_render-ready-함수명

TagWire의 render 직전에 함수를 호출합니다. 즉 모든 Tail Function이 호출되기 전에 처리되며, 함수에 TagWire.render에서 전달한 데이터를 파라미터로 전달합니다. 함수의 return 값이 false이면 render 처리가 취소됩니다.

_render-finish-함수명

TagWire의 render 직후에 함수를 호출합니다. 즉 모든 Tail Function이 호출된 후에 처리되며, 함수에 TagWire.render에서 전달한 데이터를 파라미터로 전달합니다.

_render-complete-함수명

TagWire의 render 가 완전히 끝난 후 함수를 호출합니다. 함수에 TagWire.render에서 전달한 데이터를 파라미터로 전달합니다.

_객체-ready-함수명

특정 object나 array의 render 직전에 함수를 호출합니다. 즉 해당 데이터에서 처리할 모든 Tail Function이 호출되기 전에 처리되며, 대상 object나 array를 함수의 파라미터로 전달합니다. 함수의 return 값이 false이면 render 처리가 취소됩니다.

_객체-finish-함수명

특정 object나 array의 render 직후에 함수를 호출합니다. 즉 해당 데이터에서 처리할 모든 Tail Function이 호출된 후에 처리되며, 대상 object나 array를 함수의 파라미터로 전달합니다.

_객체-complete-함수명

TagWire의 render 가 완전히 끝난 후 함수를 호출합니다. 대상 object나 array를 함수의 파라미터로 전달합니다.

_배열-item-ready-함수명

Array의 개별 리스트를 생성하기 직전에 함수를 호출합니다. 호출하는 함수에 대상 array의 인자를 파라미터로 전달합니다. 함수의 return 값이 false인 경우 리스트를 생성하지 않습니다.

_배열-item-finish-함수명

Array의 개별 리스트를 생성하고 나서 함수를 호출합니다. 호출하는 함수에 대상 array의 인자를 파라미터로 전달합니다.

_배열-item-complete-함수명

TagWire의 render 가 완전히 끝난 후 함수를 호출합니다. 호출하는 함수에 대상 array의 인자를 파라미터로 전달합니다.