<!DOCTYPE html>
<html>
<head>
<title>Lab 12 - 自訂Binding</title>
<script src="../Scripts/jquery-1.7.2.js"></script>
<script src="../Scripts/knockout-2.1.0.debug.js"></script>
<script src="../Scripts/kendo/kendo.web.min.js" type="text/javascript"></script>
<link href="../Content/kendo/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../Content/kendo/kendo.metro.min.css" rel="stylesheet" type="text/css" />
<script>
ko.bindingHandlers.kendoDate = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
// 第一次繫結時觸發, 主要用來設定初值、為元素加上外掛、掛載事件... 等
//element指向對象元素
var $elem = $(element);
//透過valueAccess()可取得繫結標的
var val = valueAccessor();
//透過allBindingsAccessor可取到同一data-bind中其他設定
var allBindParams = allBindingsAccessor();
//轉換成日期選擇器
$elem.kendoDatePicker({
//用unwrapObservable的好處不管observable或一般屬性，均能順利取值
value: ko.utils.unwrapObservable(val),
//取得日期格式, 使用||技巧補上未指定時的預設值
format: allBindParams.kendoDateFormat || "yyyy/MM/dd",
//使用者選取日期後更新屬性
change: function (e) {
var dp = $elem.data("kendoDatePicker");
//將值設定回ViewModel屬性
if (ko.isObservable(val))
val(dp._value);
}
});
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
// 第一次繫結及之後每次繫結對象值改變時觸發，主要用來更新元素反應資料改變
//將ViewModel的屬性值設定到Kendo UI DatePicker上
var kdd = $(element).data("kendoDatePicker");
kdd.value(ko.utils.unwrapObservable(valueAccessor()));
}
}
function MyViewModel() {
var self = this;
self.regDate = ko.observable(new Date(2012, 11, 21));
self.regDateDisp = ko.computed(function () {
return kendo.toString(self.regDate(), "yyyy/MM/dd");
});
self.setToday = function () { self.regDate(new Date()) };
}
$(function () {
ko.applyBindings(new MyViewModel());
});
</script>
</head>
<body>
<input type="button" value="Set Today" data-bind="click: setToday"/>
<br />
<input type="text" data-bind="kendoDate: regDate" />
<input type="text" data-bind="kendoDate: regDate, kendoDateFormat: 'yyyy-MM-dd'" />
</body>
</html>