웹포넌트 그리드는 HTML, CSS, JS로 만들어진 프로그램 입니다.
조금만 응용하면 databind.js를 이용한 데이터 바인딩, 웹소켓기반 실시간 데이터 바인딩을 사용 할 수 있습니다.
<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에서 데이터를 바인딩할 때 사용하는 속성입니다.
위와같이 템플릿을 만들어준 후 다음과 같이 코드를 만들어 줍니다.
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를 사용하여 추가 할 수 있습니다.