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

  はじめに

http://blogs.yahoo.co.jp/dk521123/35944445.html
でできる限り、共通処理にしたかったので、してみた。

 

  サンプル

  共通部分:外部JavaScript

js/ChangeValuesTracker.js
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;
};

function setViewModel(viewModel) {
   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);
}

  使用者:HTML

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'>
<script type='text/javascript' src='./js/ChangeValuesTracker.js'></script>
<style type="text/css">
.odd {
    background-color: #ccc
}
.even {
    background-color: #aaa;
}
</style>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>Delete?</th>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr data-bind="css: { even: $index() % 2 == 0, odd: $index() % 2 != 0 }">
            <td><input type="checkbox" data-bind="checked: isDeleted, attr: { name: 'isDeleted' + $index() }" /></td>
            <td><input type="text" data-bind="value: id, attr: { name: 'id' + $index() }" /></td>
            <td><input type="text" data-bind="value: name, attr: { name: 'name' + $index() }" /></td>
        </tr>
    </tbody>
</table>
<button data-bind="click: close">close</button>
<button data-bind="click: save">save</button>

<script type="text/javascript">
    function Person(isDeleted, id, name) {
       this.isDeleted = ko.observable(isDeleted);
       this.id = ko.observable(id);
       this.name = ko.observable(name);
    }
    
    function ViewModel(people) {
       this.people = ko.observableArray(people);
    }
    
    var viewModels = new ViewModel([
        new Person(true, 1, "Mike"),
        new Person(false, 2, "Tom"),
        new Person(true, 3, "Smith"),
        new Person(false, 4, "Kevin"),
        new Person(false, 5, "Ken"),
        new Person(true, 6, "Amy"),
    ]);
    
    setViewModel(viewModels);
</script>
</body>
</html>

 

  関連記事

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

http://blogs.yahoo.co.jp/dk521123/35944445.html

  ASP.NET MVC で変更検知を考える

http://blogs.yahoo.co.jp/dk521123/35963034.html