はじめに
* データ入力をして、別ページに移動しようとしたら、 移動しても問題ないか？っていう確認ダイアログを表示する実装を webアプリケーション上で考える * knockout.js を使えば、双方向バインディングをサポートされているので、 データ変更検知（ダーティ・チェック）が、比較的に綺麗に実装できるのかなっと。
サンプル
できれば共通化したいが、ひとまずは実装できた '<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>
</head>
<body>
<input type="text" data-bind="value: textProperty" />
<input type="checkbox" data-bind="checked: boolProperty" />
<button data-bind="click: close">close</button>
<button data-bind="click: save">save</button>
<script type="text/javascript">
function ChangeTracker(root, isInitiallyDirty) {
var result = function() {}
var _initialState = ko.observable(ko.toJSON(root));
var _isInitiallyDirty = ko.observable(isInitiallyDirty);
result.isDirty = ko.dependentObservable(function() {
return _isInitiallyDirty() || _initialState() !== ko.toJSON(root);
});
result.reset = function() {
_initialState(ko.toJSON(root));
_isInitiallyDirty(false);
};
return result;
};
var viewModel = {
textProperty: ko.observable("Hello"),
boolProperty: ko.observable(true)
};
viewModel.tracker = new ChangeTracker(viewModel, false);
viewModel.close = function() {
if (viewModel.tracker.isDirty() &&
!window.confirm('本当にいいんですね？(閉じる代わりにYahooに移動)')) {
// キャンセル
return;
} else {
location.href = "http://www.yahoo.co.jp/";
}
}
viewModel.save = function() {
viewModel.tracker.reset();
}
ko.applyBindings(viewModel);
</script>
</body>
</html>