[kendo ui] 모바일 캔도 검도 kendo ui 참고 코드

<section class="container">
	<%-- search 영역 --%>
	<div class="input">
		<select id="searchSomething" name="searchSomething" data-bind="value: searchSomething, events:{change: changeSelectValue}">
			<option value="" <c:if test="${commandMap.searchSomething == ''}">selected</c:if>>전체</option>
			<c:forEach var="result" items="${controller.model.obeject}" varStatus="status">
				<option value="${result}" <c:if test="${result == commandMap.searchSomething}">selected</c:if>>${result.name}</option>
			</c:forEach>
		</select>
	</div>
	
	// data-bind="value: searchSomething, events:{change: changeSelectValue}" 넘기고 싶은 파라미터와 events를 선언해줌 / 이 경우 콤보박스 CHANGE 될 때 changeSelectValue라는 함수가 실행되도록 설정
	
	
	<div class="search">
		<input type="text" data-bind="value: searchKeyword, events:{ change: changeSearch }">
		<a href="#none" class="" data-bind="events:{ click: changeSearch}">찾기</a>
	</div>
	<%-- search 영역  edn --%>
	
	// data-bind="value: searchKeyword, events:{ change: changeSearch }"
	// data-bind="events:{ click: changeSearch}"
</section>

<ul class="list mb30" data-template="templateId" data-bind="source: dataInfo"></ul>

// data-template="templateId" 아래 템플릿 영역을 가져옴
// data-bind="source: dataInfo" 맨 하단의 바인더된 데이터를 바인딩해서 template안에서 사용함
// kendo.bind($(".container"), _binder); _binder : _binder.set("dataInfo", _items );
	
<script id="templateId" type="text/x-kendo-template">
	<li>
		<dl>
			<dt>명칭1</dt>
			<dd>#:name#</dd>
		</dl>
		<dl>
			<dt>명칭2</dt>
			<dd>#:htel#</dd>
		</dl>
		<dl>
			<dt>명칭3</dt>
			<dd>#:hp#</dd>
		</dl>
	</li>
</script>

<!--kendo 그리도 조회 영역-->
var _binder = null;
var _dataSource = new kendo.data.DataSource({
	transport: {
		read:{
			url: "controllerBindName.do", dataType: "json", data: {chkid: randKey()}
		}
	},
	schema:{ model:{ id: "irum" } } // 서버로부터 받아온 데이터에서 각 항목들을 고유하게 식별할 수 있는 속성의 이름을 나타냅니다. 이 값은 데이터의 주요 식별자(ID)로 사용되며, 중복되지 않는 고유한 값을 가져야 합니다.
});

// 데이터 자동 업데이트
_binder = kendo.observable({
	// 파라미터 영역
	searchSomething: "${commandMap.searchSomething}"
	, dataInfo: null
	, searchKeyword: ""
	, changeSelectValue : function(e){
		_dataSource.read({searchSomething: this.searchSomething, chkid: randKey() }).then(function(e){
			_binder.changeSearch();
		});
	}
	, changeSearch: function(e){
		var _searchKeyword = this.searchKeyword;
		
		if( _searchKeyword == "" ){
			_dataSource.filter( null );
		}else{
			_dataSource.filter({
				logic: "or"
				, filters: [
					{ field: "columnName1", operator: "contains", value: _searchKeyword }
					, { field: "columnName2", operator: "contains", value: _searchKeyword }
					, { field: "columnName3", operator: "contains", value: _searchKeyword }
					, { field: "columnName4", operator: "contains", value: _searchKeyword }
				 ]
			});
		}
		
		var _items = _dataSource.view();
			
		// 조회 결과 여부
		if (_items.length === 0) {
			$("#noResultsMessage").show();
		} else {
			$("#noResultsMessage").hide();
		}
		
		_binder.set("dataInfo", _items );
	}
});
_binder.changeSelectValue();
kendo.bind($(".container"), _binder);
<!--kendo 그리도 조회 영역 end -->
[출처] [kendo ui] 모바일 캔도 검도 kendo ui 참고 코드|작성자 개발자 카이트

data: {chkid: randKey() 쓰는 이유

data: {chkid: randKey()}를 사용하는 이유는 Kendo UI의 데이터 소스(kendo.data.DataSource)가 데이터를 요청할 때 추가적인 파라미터를 함께 서버로 전달하기 위함입니다.

여기서 data: {chkid: randKey()}는 서버에 전달되는 파라미터 중 하나로, randKey() 함수가 호출되어 해당 함수의 반환값을 chkid라는 파라미터의 값으로 사용합니다. 이렇게 함으로써 서버 측에서는 요청을 구분하거나, 클라이언트 측에서 생성된 값을 서버로 전달하여 서버에서 해당 값을 활용할 수 있게 됩니다.

일반적으로 이러한 방식은 서버 측에서 특정 작업을 구분하거나 클라이언트 측에서 생성된 임시 값이나 요청의 특정 정보를 서버로 전달하는 데 사용됩니다. randKey() 함수가 호출되어 새로운 값을 반환하게 되면, 매 요청마다 다른 값이 chkid 파라미터에 전달되어 서버에서 각 요청을 식별하거나 처리할 수 있습니다.

이와 같은 방식은 웹 애플리케이션에서 비동기적으로 데이터를 요청하거나 특정 작업을 수행하는 데에 많이 활용되며, 보안 측면에서도 일부 보안을 제공하는데 사용될 수 있습니다. 서버 측에서는 chkid 파라미터를 검증하여 요청의 유효성을 확인하거나, 중복 요청 등을 방지하는 등의 처리를 할 수 있습니다.

​

​

kendo.observable 란?

kendo.observable은 Kendo UI에서 제공하는 MVVM (Model-View-ViewModel) 패턴의 일부로, 데이터 바인딩을 쉽게 구현할 수 있도록 도와주는 기능입니다. MVVM 패턴은 데이터, UI, 그리고 데이터와 UI를 연결하는 ViewModel로 구성되어 있으며, 이를 통해 데이터와 UI를 분리하여 애플리케이션의 유지보수성과 확장성을 향상시킬 수 있습니다.

kendo.observable은 JavaScript 객체를 Kendo UI의 Observable Object로 변환하는 역할을 합니다. Observable Object는 데이터 변경을 자동으로 감지하고 해당 변경을 UI에 반영할 수 있도록 해주는 객체입니다. 이렇게 하면 데이터의 변경을 수동으로 UI에 반영하지 않아도 자동으로 데이터와 UI가 동기화되게 됩니다.

Observable Object를 생성하기 위해 kendo.observable 함수를 사용합니다.