데이터 바인딩, 모델

webPonent Grid 2.0 Data Binding, Model

 webPonent Grid 2.0은 TR노드로 이루어진 마크업, Array<Array>, Array<Map>세가지 형식의 데이터로 그리드에 로우를 추가 할 수 있습니다.

15px2

그리드 데이더 바인딩의 기본

마크업으로부터 데이터 추가

다음은 ajax로 tr노드로 이루어진 data.html을 가져와서 그리드에 로우를 추가하는 예 입니다.

data.htmlxml
<tr>
    <td>1</td>
    <td>areynolds</td>
    <td>pYhuzU</td>
    <td>Male</td>
</tr>
<tr>
    <td>2</td>
    <td>egeorge</td>
    <td>i0X0x4</td>
    <td>Female</td>
</tr>
<tr>
    <td>3</td>
    <td>jellis</td>
    <td>tQWflr38bCS</td>
    <td>Female</td>
</tr>
<tr>
    <td>4</td>
    <td>mbutler</td>
    <td>FuzZU1FX56</td>
    <td>Female</td>
</tr>
xml
<table id="ci-grid">
        
</table>
 
<script id="ci-grid-template" type="text/template">
    <table>
        <thead>
            <tr>
                <th name="id" >ID</th>
                <th name="user_name">USER NAME</th>
                <th name="password">PASSWORD</th>
                <th name="gender">GENDER</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td name="id" bind="id" ></td>
                <td name="user_name" bind="user_name" ></td>
                <td name="password" bind="password" ></td>
                <td name="gender" bind="gender" ></td>
            </tr>
        </tbody>
    </table>
</script>
 
<script>
    var table = $('#ci-grid');
    var template = $('#ci-grid-template');
 
    var grid = webponent.grid.init(table, template);
 
	$.ajax({
		url : 'data.html',
		dataType : 'html',
		success : function (resp) {
			grid.appendRow(resp);
		}
	});
</script>

Array<Array>로부터 데이터 추가

다음은 배열<배열>로 이루어진 json데이터를 가져와 로우를 추가하는 예제 입니다. 배열은 키값을 가지고 있지 않기때문에 템플릿의 tbody의 tr에 들어있는 cell과 순서대로 매칭 됩니다.

data.jsonjs
[
    [1, "areynolds", "pYhuzU", "Male"],

    [2, "egeorge", "i0X0x4", "Female"],

    [3, "jellis", "tQWflr38bCS", "Female"],

    [4, "mbutler", "FuzZU1FX56", "Female"]
]] ]>
xml
<table id="ci-grid">
        
</table>
 
<script id="ci-grid-template" type="text/template">
    <table>
        <thead>
            <tr>
                <th name="id" >ID</th>
                <th name="user_name">USER NAME</th>
                <th name="password">PASSWORD</th>
                <th name="gender">GENDER</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td name="id" bind="id" ></td>
                <td name="user_name" bind="user_name" ></td>
                <td name="password" bind="password" ></td>
                <td name="gender" bind="gender" ></td>
            </tr>
        </tbody>
    </table>
</script>
 
<script>
    var table = $('#ci-grid');
    var template = $('#ci-grid-template');
 
    var grid = webponent.grid.init(table, template);
 
	$.ajax({
		url : 'data.json',
		dataType : 'json',
		success : function (resp) {
			grid.appendRow(resp);
		}
	});
</script>

Array<Map>으로부터 데이터 추가

다음은 배열<맵>으로 이루어진 json데이터를 가져와 로우를 추가하는 예제 입니다. 이경우 키값을 가지고 있기때문에 가장 속도가 빠름니다. 제일 추천하는 방식입니다.

data.jsonjs
[
    {
        "id" : 1, 
        "user_name" : "areynolds",
        "password" : "pYhuzU",
        "gender" : "Male"
    },
    {
        "id" : 2, 
        "user_name" : "egeorge",
        "password" : "i0X0x4",
        "gender" : "Female"
    },
    {
        "id" : 3, 
        "user_name" : "jellis",
        "password" : "tQWflr38bCS",
        "gender" : "Female"
    },
    {
        "id" : 4, 
        "user_name" : "mbutler",
        "password" : "FuzZU1FX56",
        "gender" : "Female"
    }
]] ]>
xml
<table id="ci-grid">
        
</table>
 
<script id="ci-grid-template" type="text/template">
    <table>
        <thead>
            <tr>
                <th name="id" >ID</th>
                <th name="user_name">USER NAME</th>
                <th name="password">PASSWORD</th>
                <th name="gender">GENDER</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td name="id" bind="id" ></td>
                <td name="user_name" bind="user_name" ></td>
                <td name="password" bind="password" ></td>
                <td name="gender" bind="gender" ></td>
            </tr>
        </tbody>
    </table>
</script>
 
<script>
    var table = $('#ci-grid');
    var template = $('#ci-grid-template');
 
    var grid = webponent.grid.init(table, template);
 
	$.ajax({
		url : 'data.json',
		dataType : 'json',
		success : function (resp) {
			grid.appendRow(resp);
		}
	});
</script>

데이터 모델

위 세개 예제들은 각각 다른방식으로 그리드에 데이터를 추가하였지만, 동일한 데이터 모델을 가지게 됩니다. 그리고 이 모델은 그리드객체에 data속성으로 참조 할 수 있습니다.

Codejs
console.log(grid.data);
Console Outputjs
[
    {
        "id" : 1, 
        "user_name" : "areynolds",
        "password" : "pYhuzU",
        "gender" : "Male"
    },
    {
        "id" : 2, 
        "user_name" : "egeorge",
        "password" : "i0X0x4",
        "gender" : "Female"
    },
    {
        "id" : 3, 
        "user_name" : "jellis",
        "password" : "tQWflr38bCS",
        "gender" : "Female"
    },
    {
        "id" : 4, 
        "user_name" : "mbutler",
        "password" : "FuzZU1FX56",
        "gender" : "Female"
    }
]] ]>
Codejs
console.log(grid.data[0].user_name);
Console Outputjs
"areynolds"

데이터 바인딩

 Array<Map>형식의 데이터를 이용할때는 더욱 유연한 방식으로 데이터를 바인딩 할 수 있습니다.

CELL이외의 마크업에 바인딩

th, td이외의 마크업에도 바인딩을 할 수 있습니다. innerTEXT가 존재하는 요소는 해당 요소의 innerTEXT값이 바뀌게 됩니다. input요소인 경우는 해당 요소의 value값을 세팅 합니다.

xml
var data = [
    {
        "id" : 1, 
        "user_name" : "areynolds",
        "password" : "pYhuzU",
        "gender" : "Male"
    },
    {
        "id" : 2, 
        "user_name" : "egeorge",
        "password" : "i0X0x4",
        "gender" : "Female"
    },
    {
        "id" : 3, 
        "user_name" : "jellis",
        "password" : "tQWflr38bCS",
        "gender" : "Female"
    },
    {
        "id" : 4, 
        "user_name" : "mbutler",
        "password" : "FuzZU1FX56",
        "gender" : "Female"
    }
]
 
<script id="ci-grid-template" type="text/template">
    <table>
        <thead>
            <tr>
                <th name="id" >ID</th>
                <th name="user_name">USER NAME</th>
                <th name="password">PASSWORD</th>
                <th name="gender">GENDER</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td name="id"><a href="#" bind="id"></a></td>
                <td name="user_name" bind="user_name" ></td>
                <td name="password" bind="password" ></td>
                <td name="gender"><input type="text" bind="gender"/></td>
            </tr>
        </tbody>
    </table>
</script>

마이크로 템플릿을 이용한 바인딩

마이크로 템플릿을 이용하여 bind속성을 안쓰고도 데이터를 바인딩 할 수 있습니다. {{key}}를 이용하여 자유롭게 해당 값을 바인딩 할 수 있습니다. 아래예는 a태그의 href속성에 데이터의 homepage값을 세팅하는 예 입니다.

xml
var data = [
    {
        "id" : 1, 
        "user_name" : "areynolds",
        "password" : "pYhuzU",
        "gender" : "Male",
		"homepage" : "www.google.com"
    },
    {
        "id" : 2, 
        "user_name" : "egeorge",
        "password" : "i0X0x4",
        "gender" : "Female",
		"homepage" : "www.naver.com"
    },
    {
        "id" : 3, 
        "user_name" : "jellis",
        "password" : "tQWflr38bCS",
        "gender" : "Female",
		"homepage" : "www.daum.com"
    },
    {
        "id" : 4, 
        "user_name" : "mbutler",
        "password" : "FuzZU1FX56",
        "gender" : "Female",
		"homepage" : "www.nate.com"
    }
]
 
<script id="ci-grid-template" type="text/template">
    <table>
        <thead>
            <tr>
                <th name="id" >ID</th>
                <th name="user_name">USER NAME</th>
                <th name="password">PASSWORD</th>
                <th name="gender">GENDER</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td name="id"><a href="{{homepage}}" bind="id"></a></td>
                <td name="user_name" bind="user_name" ></td>
                <td name="password" bind="password" ></td>
                <td name="gender"><input type="text" bind="gender"/></td>
            </tr>
        </tbody>
    </table>
</script>

바인딩 되지 않은 데이터

다음 예제에서는 데이터에서 homepage값을 바인딩하는데  사용하지 않았습니다. 그래도 전체 데이터는 그리드내 데이터 모델에 세팅 됩니다.

xml
<table id="ci-grid">
        
</table>
 
<script id="ci-grid-template" type="text/template">
    <table>
        <thead>
            <tr>
                <th name="id" >ID</th>
                <th name="user_name">USER NAME</th>
                <th name="password">PASSWORD</th>
                <th name="gender">GENDER</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td name="id" bind="id"></td>
                <td name="user_name" bind="user_name" ></td>
                <td name="password" bind="password" ></td>
                <td name="gender"><input type="text" bind="gender"/></td>
            </tr>
        </tbody>
    </table>
</script>
 
<script>
 
var table = $('#ci-grid');
var template = $('#ci-grid-template');

var grid = webponent.grid.init(table, template);
var data = [
    {
        "id" : 1, 
        "user_name" : "areynolds",
        "password" : "pYhuzU",
        "gender" : "Male",
		"homepage" : "www.google.com"

    },
    {
        "id" : 2, 
        "user_name" : "egeorge",
        "password" : "i0X0x4",
        "gender" : "Female",
		"homepage" : "www.naver.com"
    },
    {
        "id" : 3, 
        "user_name" : "jellis",
        "password" : "tQWflr38bCS",
        "gender" : "Female",
		"homepage" : "www.daum.com"
    },
    {
        "id" : 4, 
        "user_name" : "mbutler",
        "password" : "FuzZU1FX56",
        "gender" : "Female",
		"homepage" : "www.nate.com"
    }
];
	
	grid.appendRow(data);
 
	console.log(grid.data[1].homepage);
</script>
Console Outputjs
"www.naver.com"