backbone.jsでtooltipを表示する

javascript


backbone.jsのサンプルプログラムでtooltipを表示していたので、どういう処理になっているのか読んでみました。
せっかく読んだので、わかりやすいように関連する箇所だけのサンプルにしてみました。

$(function(){
    var AppView = Backbone.View.extend({
        el: $('body'),

	events: {
	    "keyup #new-input": "showTooltip"
	},

	initialize: function() { 
	    this.input = this.$("#new-input");
	},

	showTooltip: function(){
	    var tooltip = this.$(".tooltip");
	    var val = this.input.val();
	    tooltip.fadeOut();
	    if (this.tooltipTimeout) {
		clearTimeout(this.tooltipTimeout);
	    }
	    if (val == '' || val == this.input.attr('placeholder')) {
		return;
	    }
	    var show = function(){
		tooltip.show().fadeIn();
	    };
	    this.tooltipTimeout = _.delay(show, 1000);
	}
	
    });

    window.App = new AppView;    
});

ここに置いています。
http://dl.dropbox.com/u/494487/backbone-sample/tooltip/index.html

テキストボックスでのkeyupイベントにコールバックを紐付けて、コールバックは１秒遅れてツールチップを表示しています。
ただしテキストボックスの入力が空でない場合や、placeholderと同じ値が入力されている場合は表示されません。

eventsって？

Backbone.ViewのdelegateEvents。
Backbone.Viewではeventsに{"event selector": "callback"}のハッシュを指定することによって、イベントハンドリングができます。
この例では、#new-inputの要素にkeyupイベントが発生したとき、showTooltipがコールバックされます

this.$って？

initializeではjQueryで、#new-inputの要素を取得しています。
jQueryが読み込まれている場合、Backbone.Viewではthis.$(selector)で、viewのelementをcontextとして、要素指定ができます。($(selector, this.el)と同等)

underscore.jsのdelay

showTooltipの処理はほとんどjQueryですが、delayというunderscore.jsが使われています。

  _.delay(function, wait, [*arguments])

functionをwaitミリ秒後に処理します。