databind.js 연동

 웹포넌트 그리드는 HTML, CSS, JS로 만들어진 프로그램 입니다.

조금만 응용하면 databind.js를 이용한 데이터 바인딩, 웹소켓기반 실시간 데이터 바인딩을 사용 할 수 있습니다.

xml
<table id="grid-table-1">
</table>


<script id="grid-template-1" type="text/template">
	<table width="100%" height="350px">
		<thead>
			<tr>
				<th name="indx" align="center">순위</th>
				<th name="Isu">종목명</th>
				<th name="NowPrc" align="right">현재가</th>
				<th name="PrdayCmp" align="right">전일비</th>
				<th name="Updn" align="right">등락율(%)</th>
				<th name="TopQty" align="right">거래량</th>
			</tr>
		</thead>
		<tbody data-bind="_this.listItem(block)">
			<tr>
				<td name="indx" bind="indx" data-bind="indx"></td>
				<td name="Isu" bind="Isu" data-bind="Isu"></td>
				<td name="NowPrc" bind="NowPrc" data-bind="NowPrc"></td>
				<td name="PrdayCmp" bind="PrdayCmp" data-bind="PrdayCmp"></td>
				<td name="Updn" bind="Updn" data-bind="Updn"></td>
				<td name="TopQty" bind="TopQty" data-bind="TopQty"></td>
			</tr>
		</tbody>
	</table>
</script>

 일단 위와같이 템플릿을 만들어 줍니다. 템플릿에서 보이는 data-bind속성은 databind.js에서 데이터를 바인딩할 때 사용하는 속성입니다.

위와같이 템플릿을 만들어준 후 다음과 같이 코드를 만들어 줍니다.

js
var table1 = $('#grid-table-1');
var template1 = $('#grid-template-1');
var grid1 = webponent.grid.init(table1, template1);


function setupGrid (context, grid) {


	// data-bind속성을 그리드바디의 TBODY에 복사 해 줍니다.
	$(grid.markup.main.body.tbody)
			.attr('data-bind', $(grid.settings.template.tbody).attr('data-bind'));


	// databind.js가 파싱할 수 있도록 빈 로우를 추가 해 줍니다.
	var columns = grid.settings.columns;
	var emptyRow = {};
	for (var i = 0; i < columns.length; i++) {
		var column = columns[i];
		emptyRow[column.bind] = '';
	};
	var emptyRowArray = [];
	emptyRowArray.push(emptyRow);
	grid.appendRow(emptyRowArray);
 
	// databind.js도 로우에 CLASS를 붙혀주므로 중복되지 않게
	// 이시점에 웹포넌트그리드가 로우에 붙혀준 CLASS들은 삭제 해 줍니다.
	$(grid.rows[0]).removeClass();

	return manager.addBinder(context, true);
}
	
function bindToGrid (grid, binder, data) {
	binder.bind(data);
	$(grid.markup.functional.freezeScrollerInner).height($(grid.markup.main.body.tbody).height());
}


var binder = setupGrid('data-bind-sample', grid1);
		
$.ajax({
	dataType : 'json',
	url : '../../../data/ranking-map.json',
	success : function (resp) {
		var data = {};
		data.block = resp;
		bindToGrid(grid1, binder, data);
	}
});

  프로젝트에 따라서는 위 코드를 공통코드로 만든 후 적재적소에 사용하여 웹포넌트 그리드에 로우를 databind.js를 사용하여 추가 할 수 있습니다.