SQLの窓

2013年11月15日


(callback.bind(this))(); で、無名 function で使用される this に this を引き継ぐ

具体的には、jQuery の要素のインスタンスのメソッドとしてプラグインを作成した場合、そのメソッドの引数を無名 function と想定した場合の処理です。

もっと言えば、プラグイン内の this は要素自身ですから、その this を外部の無名 function の this として使用できるようにする記述です。

bind メソッド

以下がプラグインの定義です。
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	$.extend( {_nav: $(navigator)[0].userAgent.toLowerCase()});
	$.fn.extend({
		StreetView : function(a,b){
			var pos = new google.maps.LatLng(a,b);
			$( this ).data( "pano", new google.maps.StreetViewPanorama($(this)[0],{ position: pos }) );
			return this;
		}, 
		StreetViewPov : function(a,b){
			var pov = {
				heading: a,  
				pitch: b 
			}
			$( this ).data( "pano" ).setPov(pov);
			return this;
		},
		_sh: function( callback ) {
			if ( $._nav.indexOf("iphone") > -1 || $._nav.indexOf("android") > -1 ) {
				(callback.bind(this))();
			}
			return this;
		},
		_pc: function( callback ) {
			if ( $._nav.indexOf("iphone") <= -1 && $._nav.indexOf("android") <= -1 ) {
				(callback.bind(this))();
			}
			return this;
		}
	});
}

_pc 内の this は、自分自身で、return する事によって、連鎖可能な jQuery のオブジェクトになります。これを、引数の callback の内部でも使えるように、(callback.bind(this))(); としています。

利用方法は以下のようになります。
<script src="http://winofsql.jp/jquery/plugins/street_view.js"></script>
<script>
$(function(){
	var pano = $('#pano')
	.StreetView(47.615471,1.518008)
	.StreetViewPov(-42.14,9.13)
	// スマホの処理
	._sh(function(){
		this.css("cssText","width:290px!important;height:290px!important");
	})
	// PC の処理
	._pc(function(){
		this
		.css("width","600px")
		.css("height","450px");
	});
});
</script>
<div id="pano"></div>

関連する記事

jQuery のプラグインとしてストリートビューを利用する(2)



posted by at 19:59 | JavaScript | このブログの読者になる | 更新情報をチェックする