【knockout.js】knockout.js を使った変更検知（ダーティ・チェック）を考える [1]

knockout.js

    はじめに

 * データ入力をして、別ページに移動しようとしたら、
   移動しても問題ないか？っていう確認ダイアログを表示する実装を
   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'>
</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>

 

    参考文献

サンプル
http://jsfiddle.net/rniemeyer/7Nsuh/
http://jsfiddle.net/rniemeyer/dtpfv/
http://codepen.io/kunukn/pen/rOXaXN
動画
https://www.youtube.com/watch?v=ad3nKT90QCo
https://www.youtube.com/watch?v=Qe9ImcrpSDA

 

    関連記事

    knockout.js を使った変更検知（ダーティ・チェック）を考える [2]

今回の処理をできる限りで共通化してみた '
http://blogs.yahoo.co.jp/dk521123/35949660.html