この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Arrayの変更を監視する
backbone.jsだと、コレクションの変化に応じてイベントを実行させることができます。 そんな感じで、コレクションの状態が変化したタイミングを検知したり、何か処理を挟みたいときに役立つwatch-arrayモジュールを紹介します。
環境構築方法
今回使用した動作環境は以下のとおりです。
- OS : MacOS X 10.7.5
- Node.js : v0.10.4
- npm : 1.2.18
npmを使用してモジュールをインストールしましょう。
% mkdir watch-array
% cd watch-array
% npm install watch-array
サンプルプログラム作成
watch-arrayモジュールを使ってみましょう。 usersコレクションを用意し、watchArrayにコールバック関数と共に渡します。 このコールバック関数でコレクションが追加/削除/ソートされたタイミングを検知します。
var watchArray = require('watch-array');
var users = [{name:'taro',age:20}, {name:'hanako',age:25}];
watchArray(users, function(update){
if(update.add) {
console.log("値が追加されました.");
console.log(update.add);
}
if(update.remove) {
console.log("値が削除されました.");
console.log(update.remove);
}
if(update.sort) {
console.log("ソートされました.");
console.log(update.sort);
}
})
//先頭要素削除
users.shift();
//要素追加
users.push({name:'mike',age:40});
//ソート
users.sort();
プログラムを実行してみてください。各タイミングでコレクションの状態をハンドリングすることができます。
また、配列の変化をPub/Subで受けとることもできます。 次のようにすれば、コレクションが更新されたタイミング(publish)で、watchArrayのコールバック関数が実行され、 どのオブジェクトが変更されたか検知できます。
var watchArray = require('watch-array');
var users = [{name:'taro',age:20}, {name:'hanako',age:25}];
//subscrive
watchArray(users, function(update) {
if(update.user) {
console.log("update.index:",update.index);
console.log("update.user:",update.user);
}
});
users[1].age = 30
users.publish({ user: users[1], index: 1 });
まとめ
今回はコレクションの状態を監視するwatch-arrayモジュールを紹介しました。 websocketと組み合わせれば、クライアントまでリアルタイムに状態を伝えることも可能ですね。