[Javascript Framework] Knockout-Kendo.js 결합

Knockout-Kendo.js

참조 URL

1. http://rniemeyer.github.io/knockout-kendo/
   
2. http://www.kendoui.com/
   
3. http://jquery.com/
   

 Knockout.js 2.2 + Kendo UI v2012.3.1114 + jQuery 1.8.2 를 같이 사용하여 개발할 수 있는 javascript가 있다. Knockout-Kendo.js를 통해 콜라보레이션이 가능해 진다. 간단한 예제로 확인해 보자.

아래는 Kendo UI를 사용하는 HTML 테그다.

<div data-bind="kendoGrid: { data: items, groupable: true, scrollable: true, sortable: true, pageable: { pageSize: 10 } }"> </div> <button data-bind="click: addItem">Add Item</button>

[코드] Kendo UI를 사용하는 Html tag

아래는 Knockout.js에서 요구하는 ViewModel을 이용해서 Html tag에 데이터 바인딩을 하는 자바스크립트다.

var ViewModel = function() { this.items = ko.observableArray([ { id: "1", name: "apple"}, { id: "2", name: "orange"}, { id: "3", name: "banana"} ]); this.addItem = function() { var num = this.items().length + 1; this.items.push({ id: num, name: "new" + num}); }; }; ko.applyBindings(new ViewModel());

[코드] Knockout의 Viewmodel로 바인딩 하는 코드

[그림2] 결과 화면

 '그림2'처럼 Knockout이용해 데이터 바인딩을 한 KendoUI의 결과 화면이다. 이 밖에도 여러가지 예제가 있으니 Knockout과 KendoUI에 관심이 있으신 분들은 도입을 검토해 보기 바란다. 

• Kendo UI Web Widgets
• AutoComplete
• Calendar
• ColorPicker
• ComboBox
• DatePicker
• DateTimePicker
• DropDownList
• Editor
• Grid
• ListView
• Menu
• MultiSelect
• NumericTextBox
• PanelBar
• RangeSlider
• Slider
• Splitter
• TabStrip
• TimePicker
• Tooltip
• TreeView
• Upload
• Window
• Kendo UI DataViz Widgets
• Chart
• RadialGauge
• LinearGauge

[표1] Kendo UI Web Widgets