Ȥ Blog

Ruby,C#

jQuery

jQuery: liveؿǤޤ¸ߤʤǤФƥ٥Ȥꤹ

AjaxѤƤȡưŪɲä줿ƥĤ˥ܥȤ󥯤ȤäơĤ˥٥ȥϥɥꤷ礬¿Ȼפޤ
ϤޤǤϡAjaxǼƥĤڡɲäˡ٥ȥϥɥꤹ륳ɤ񤤤ƤΤǤäƷ빽ɤʤäꤷޤ
Ǥ⡢ޤʤʡȤפäƤΤǤ,jQuerylive᥽åɤѤȡñ˲ǤƤޤȤȯ
ɥȤɤȡ
	Attach a handler to the event for all elements which match the current selector, now and in the future.
ߵڤӾˤ¸ߤǤФƥ٥ȥϥɥꤹ뤳ȤǤ롢ȤΤȡ
餷ȸȤ®äƤߤ롣
ɲáפ򥯥åȡAjaxʬƥĤơڡɲäơֺפ򥯥åȤǤä롢ȤäΥڡäƤߤ롣
31

liveؿѤʤϡʴǡʬƥļˡֺץ󥯤Υ٥Ȥꤹ륳ɤ񤤤Ƥޤ
	$(function(){
		
		//ɲáץ󥯤򥯥å ñDIVǤAjaxǼƥɥȤɲä
		$("#addLink").click(function(){
			$.get("./get_partial_content", function(html){
				$(document.body).append($(html));
				
				//󥯤Υ٥
				$(".deleteLink").click(function(){
					$(this).parent().remove();
				})
]			});
		});
		
	})
Ǥ⡢νȡǤɲä뤿Ӥˡ¸κ󥯤ФƤ⥤٥ȥϥɥɲä³ƤޤޤǤǤƤޤΤǡ˸볲Ϥޤ󤬡⤷顼Ȥɽ褦Ƥˤ硢٤Ʊ顼Ȥɽ褦ʺ󥯤ǤäƤޤޤ
ǤХڡ˥٥ȴϢϤޤȤꤷƤȤǤ
ǡǽˤƤΤliveؿȤ櫓ǡɤ򼡤Τ褦˽񤭴Ƥߤ롣

	$(function(){
		
		//ɲáץ󥯤򥯥å ñDIVǤAjaxǼƥɥȤɲä
		$("#addLink").click(function(){
			$.get("./get_partial_content", function(html){
				$(document.body).append($(html));
			});
		});
		
		//嵭Υ٥ȤưŪɲä줿DIVǤΡֺץ󥯤򥯥åȡʬ(ȿDIVˤɥȤ
		$(".deleteLink").live("click", function(){
			$(this).parent().remove();
		});
	})
	
ȡưŪɲä줿ƥ class="deleteLink" ǤФƤ⥤٥ȥϥɥ餬ꤵޤ

jQueryUIĶñAutoCompleteƤߤ

פ֤jQueryUIΥȤ򸫤Ƥߤ顢ǽȤAutoCompleteʤΤɲäƤޤٻŻǤȤʤΤǡäƤߤ뤳Ȥˡ
Rails3ǥץȤФʤΤǤȤꤢmainȤ̾ǥǥեȤΥȥ롣
  #rails g controller main
  create  app/controllers/main_controller.rb
  invoke  erb
  create    app/views/main
  invoke  test_unit
  create    test/functional/main_controller_test.rb
  invoke  helper
  create    app/helpers/main_helper.rb
  invoke    test_unit
  create      test/unit/helpers/main_helper_test.rb
ȤꤢСư main ȥ˥Ƥߤȡʥڡʤ衼äƤʴRouting Errorˤʤ롣 ޤǤϲʤƤɤʡRals3Ϥ롼ƥ󥰥ե˽񤭹ɬפΤ Ĵ٤ʤȤ褯狼ʤΤǡȤꤢ routes.rbǥեȤΥȥȥ main/index ˤʤ褦ѹ
  # You can have the root of your site routed with "root"
  # just remember to delete public/index.html.
  # root :to => "welcome#index"
  root :to => "main#index"
app/views/main/index.html.erb ˤϡjqueryUIautocompleteΥɥȤ˽äƤʴǥץ񤤤Ƥߤ롣 ȤꤢǡJavaScriptľ񤭤ǻƤߤ롣
	<input type="text" id="textbox1"></input>
	<script type="text/javascript" charset="utf-8">
		$(function(){
			var dataItems = ["C#", "C++", "C", "Java", "JavaScript", "Ruby", "IronRuby", "JRuby"];

			$("#textbox1").autocomplete({
				source : dataItems
			});
		})
	</script>
ڡɽƤߤ롣

45

ʤñˤǤƤޤޤ Ǥ⡢ºݤˤϥС̿Τۤ¿Ȼפޤ ξ source ץ JSONǡ֤URLꤷƤơС¦Ǥϡ ʸ󤫡⤷ { label : 'ɽ', value : 'Value'}֤褦˼Ƥɤ褦Ǥ
桼Ϥʸ term Ȥѥ᡼̾ǥСϤΤǡĤ򥭡ɤȤƥե륿󥰤褦ʴˤʤ뤫Ȼפޤ
DB򤤤ѰդΤݤäΤǡ餫ǻץߥ󥰸̾ΰ桼Ϥʸ˳ΤJSON֤褦ʽ񤤤Ƥߤޤ
	class MainController < ApplicationController
	  def index
			#ʤ󤫤ޤ롼ƥ󥰤ʤΤ꤯ԤΤΤ indexajaxꥯȤɤǽʬƤޤä
	    if request.xhr?
	      data_items = %w(C# C++ C Java JavaScript Ruby IronRuby JRuby)
	      return render :json => data_items.find_all{|lang| lang.include?(params[:term]) }
	    end
	  end
	end
JavaScript sourceץURLѹ
	<input type="text" id="textbox1"></input>
	<script type="text/javascript" charset="utf-8">
		$(function(){
			//var dataItems = ["C#", "C++", "C", "Java", "JavaScript", "Ruby", "IronRuby", "JRuby"];
			$("#textbox1").autocomplete({
				//source : dataItems
				source : "/"
			});
		})
	</script>
󡢤ʤƴñʤ

31

Rails3jQueryΥ饤ȥɤΥץȤȤƻȤ

ŻǤϤޤRails3ϤäȤʤΤǤʻäƤȤĤޤǤäƤ⿨뵡ʤʤΤǡäȤJavaScriptʤ󤫤ѤΥץȤRails3ǰĺäƤȻפäƤߤޤ
ȤꤢRails3򥤥󥹥ȡ롣
gem install rails
礳äȤJavaScriptȤѤΥץȤʤΤǡ js_spikeä̾ǥץȤäƤߤ롣
rails new js_spike
public/javascriptsƤߤȥǥեȤǤˤäPrototypeˤʤäƤ褦Ǥ
-rw-rw-r-- 1 satoyan satoyan    148 Feb 28 15:52 application.js
-rw-rw-r-- 1 satoyan satoyan  34787 Feb 28 15:52 controls.js
-rw-rw-r-- 1 satoyan satoyan  31056 Feb 28 15:52 dragdrop.js
-rw-rw-r-- 1 satoyan satoyan  38467 Feb 28 15:52 effects.js
-rw-rw-r-- 1 satoyan satoyan 162353 Feb 28 15:52 prototype.js
-rw-rw-r-- 1 satoyan satoyan   6278 Feb 28 15:52 rails.js
jquery-railsȤgemȥ饤ȥɤΥץȤ򤹤٤jQueryΤΤ֤Ƥ褦ʤΤǤ򥤥󥹥ȡ뤷Ƥߤ롣 Gemfile ΰԤɲá
	gem 'jquery-rails'
bunldle install ¹
	#bundle install ¹
	
	Fetching source index for http://rubygems.org/
	Using rake (0.8.7) 
	Using abstract (1.0.0) 
	Using activesupport (3.0.5) 
	Using builder (2.1.2) 
	Using i18n (0.5.0) 
	Using activemodel (3.0.5) 
	Using erubis (2.6.6) 
	Using rack (1.2.1) 
	Using rack-mount (0.6.13) 
	Using rack-test (0.5.7) 
	Using tzinfo (0.3.24) 
	Using actionpack (3.0.5) 
	Using mime-types (1.16) 
	Using polyglot (0.3.1) 
	Using treetop (1.4.9) 
	Using mail (2.2.15) 
	Using actionmailer (3.0.5) 
	Using arel (2.0.9) 
	Using activerecord (3.0.5) 
	Using activeresource (3.0.5) 
	Using bundler (1.0.10) 
	Using thor (0.14.6) 
	Using railties (3.0.5) 
	Using rails (3.0.5) 
	Installing jquery-rails (0.2.7)  #󥹥ȡ뤵ޤ...
	Using sqlite3 (1.3.3) 
"rails g" generator򸫤ƤߤȿjQuery󤬤ǤƤޤ
	#rails g generatorΥإפ򸫤Ƥߤ
	
	Usage: rails generate GENERATOR [args] [options]

	General options:
	  -h, [--help]     # Print generator's options and usage
	  -p, [--pretend]  # Run but do not make any changes
	  -f, [--force]    # Overwrite files that already exist
	  -s, [--skip]     # Skip files that already exist
	  -q, [--quiet]    # Suppress status output

	Please choose a generator below.

	Rails:
	  controller
	  generator
	  helper
	  integration_test
	  mailer
	  migration
	  model
	  observer
	  performance_test
	  plugin
	  resource
	  scaffold
	  scaffold_controller
	  session_migration
	  stylesheets

	Jquery:
	  jquery:install
	
Ȥ jquery:install ɽƤߤ롣
	#rails g jquery:install --help
	
	Usage:
	  rails generate jquery:install [options]

	Options:
	  [--version=VERSION]  # Which version of jQuery to fetch
	                       # Default: 1.5
	  [--ui]               # Include jQueryUI

	Runtime options:
	  -s, [--skip]     # Skip files that already exist
	  -p, [--pretend]  # Run but do not make any changes
	  -q, [--quiet]    # Supress status output
	  -f, [--force]    # Overwrite files that already exist

	This generator downloads and installs jQuery, jQuery-ujs HEAD, and (optionally) the newest jQuery UI
	
СλjQueruyUIȤɤλ꤬Ǥ餷Τǡä¹ԤƤߤ롣
	#rails g jquery:install --ui --force
	
    remove  public/javascripts/controls.js
    remove  public/javascripts/dragdrop.js
    remove  public/javascripts/effects.js
    remove  public/javascripts/prototype.js
  fetching  jQuery (1.5)
    create  public/javascripts/jquery.js
    create  public/javascripts/jquery.min.js
  fetching  jQuery UI (latest 1.x release)
    create  public/javascripts/jquery-ui.js
    create  public/javascripts/jquery-ui.min.js
  fetching  jQuery UJS adapter (github HEAD)
     force  public/javascripts/rails.js
	
public/javascriptsƤߤȡjqueryϢΥե뤬Ƥޤ
  # ll public/javascripts
	-rw-rw-r-- 1 satoyan satoyan    148 Feb 28 16:25 application.js
	-rw-rw-r-- 1 satoyan satoyan 216840 Feb 28 16:40 jquery.js
	-rw-rw-r-- 1 satoyan satoyan  85260 Feb 28 16:40 jquery.min.js
	-rw-rw-r-- 1 satoyan satoyan 367486 Feb 28 16:40 jquery-ui.js
	-rw-rw-r-- 1 satoyan satoyan 198792 Feb 28 16:40 jquery-ui.min.js
	-rw-rw-r-- 1 satoyan satoyan   5033 Feb 28 16:40 rails.js
Ǥpublic/stylesheetsˤjQueryUIѤCSSϤǤƤʤ褦Ǥ ʤᤸ󡢤ȸȤCSSGoogleCDNѤ뤳Ȥˤޤ Ȥꤨ redmondȤơޤΤΤȤ褦applicataion.html.erb˽񤭤Ǥ
	  <%= stylesheet_link_tag :all %>
	  <%= javascript_include_tag :defaults %>
	  <%= csrf_meta_tag %>
		<%= stylesheet_link_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css" %>
ȤꤢʴjQueryϤǤޤCSSäƤʤؤʤ褦ʵɤʡ
ȤΤʤ

JrailsƱActiveScaffoldѤ

RailsPrototype.jsjqueryȤΥץ饰ȤJrailsȤΤꡢʤΤǤActiveScaffoldȤޤʥץ饰Ʊ˻Ѥ褦ȤȡActiveScaffoldŬѤڡɽκݤˡPrototype.jsɤ߹ޤƤʤǤ衼ȤäܤƤޤޤ
ActiveScaffoldScaffoldAjaxǤߤʤΤǤܤ
http://activescaffold.com/

ºJrailsȤäƤΤ
<%= javascript_include_tag :defaults %>


äƤäƤPrototype.jsǤϤʤjQuery󥯥롼ɤΥޤ

ǡɤΤʡ Ĵ٤Ȥ
ActiveScaffoldWikiˤޤ

JrailsŬѤʤȤPrototypeͥˤȥǡ
  ActionView::Helpers::PrototypeHelper::JQUERY_VAR = 'jQuery'

Τ褦ˤơJavaScript$jQueryǾ񤭤ʤͤˤƤޤ


ºݤJrailsΥ򸫤ȡ

unless const_defined? :JQUERY_VAR
  JQUERY_VAR = '$'
end

ȤäҤޤ

ǤΤǡ̤jQueryȤʸǤʤƤɤ櫓ǡjQueryΥȤˤ⤢褦
var $j = jQuery.noConflict();
$j ȤǤʤ


ξ硢ActiveScaffoldAdminϤΥڡǤȤʤΤǡAdminѤδ쥳ȥ饯饹äơ¾AdminϥȥϤĤѾ褦ˤƤ뤿ᡢʴбƤOKǤ
class Admin::AdminControllerBase < ApplicationController
  ActionView::Helpers::PrototypeHelper::JQUERY_VAR = 'jQuery'
  layout 'admin'
  before_filter :block_none_admin
  ActiveScaffold.set_defaults do |config|
    config.ignore_columns.add [:created_at, :updated_at]
  end
end

adminȤlayoutȤäƤΤǡĤ⤳ʴ jQuery.noConflict ƤäPrototypeɤ߹ǤOKǤ
effects ץȤꤹΤ˺ʤ褦ˤޤ礦

<%= javascript_include_tag :defaults %>
		
<%= javascript_include_tag "prototype", "effects"  %> 
<%= active_scaffold_includes %>

Ǥڡ󥰤ǥ顼ˤʤ롢 ⤦äĴ٤ʤܤ

jQueryˤĤδ֤proxyʤơǤԲIJʥС

äȲˤäΤǡjQueryΥɥȤįƤ顢
$.proxy 
äƤʤ  ȻפƤߤ顢٥ȥϥɥΥƥȤǤ褦ˤʤä
ʤǤʤΤȻפäƤΤǤ
ǶRailsǤ⡢ۤȤJavaScriptjQueryΤäˤʤäƤΤǡPrototypeȤɤäûʤ뤫񤤤Ƥߤޤ

    1 //prototype
    2 Event.observe("button1", "click", this.onButton1Clicked.bindAsEventListener(this));
    3 $("button1").observe("click", this.onButton1Clicked.bindAsEventListener(this));
    4 
    5 //jQuery
    6 $("#button1").click($.proxy(this.onButton1Clicked, this));
    7 $("#button1").click($.proxy(this, "onButton1Clicked"));
    8 


äѤjQueryûƺѤߤޤ͡
ѥ᥿¾Ϥ̤ꤢΤǤƥȻν֤դˤʤäƤ롢ɥȤΥ桼Ȥˤ⤢ޤϤƤۤǤʤͳͭΤʡƤԤäפʵ롢 

ɥȤ

RailsjQueryGoogleCDNǥ󥯥롼

ޤRailsץȤƤΤǤǽʳjQueryɤƲष֡ΤϺݤʡȤȤGoogle󶡤ƤΤפФơȤäƤߤ뤳Ȥˤޤ
¤ϺǽMicrosoftƱͤΥӥĴ٤ƤߤΤǤ뵤ʤʤΤǻߤޤ(^_^;)

ɥ쥹Ū˻ꤹˡȡGoogleAjaxAPIȤäưŪɤ߹ˡ褦Ǥ
ľܻꤷñǤAPIȤäʻ꤬ǽȤȤǤäǤäƤߤޤ
APIѤˤϥɬפȤΤȤǤ


<script type="text/javascript"
src="http://www.google.com/jsapi?key=APIΥ">
</script>


괺GoogleAjaxAPI򥤥󥯥롼ɤơ

google.load("jquery", "1.3");

ǡjQeury1.3ϤκǿǤ򥤥󥯥롼ɤ褦ˤƤߤޤ
1.3.xΤ褦˾ܺ٤ʥСꤹ뤳ȤǽǡάȾ˺ǿΤΤäƤƤȤΤȤǤ

ǡRailsǤPrototypeȤΤǡjQueryζ򤱤뤿ˡ
jQuery.noConflict();
Ȥäߤ顢jQueryʤƤʤ衢ܤ롣
Ū˥󥯤ʤΤǡ˽񤤤äܤʤ褦Ǥ

google.setOnLoadCallback(function(){
jQuery.noConflict();
});


ȤƤäơڡɸˤäƤ뤳Ȥˤޤ
ɥɤȡload᥽åɤΥץ callbackȤΤäơץȥɸ˸ƤӽФ롢ߤʤȤ񤤤Ƥäɡ꤯ޤǤ

ȤƱ褦
google.load("jqueryui", "1.7");
ǡUIȤ褦Ƥޤ

jQuery







ŻǤJavaScriptǤUI̤٤jQueryƳΤǤɤjQuery˾ܤȻפƤ褦Ǥ
ʬȤΤϼ¤ϽƤǡޤǤWebǥμǥʤȤäƤơޤʤʤɤ˼뤿ˤäĴ٤ꤹ뤯餤Ǥ
jQueryϤβǤ⼫ˤMicrosoftɸǺѤ뤯餤Τե졼ĹƤޤ
2ǯʾǤ礦jQueryʤΤ򶵤Ƥ줿˿ͭ̾ȤμǥʤˤϴդƤޤΤȤ˰ˤäƤʤФޤjQuery̾ΤäƤ뤱ɡפƤʴäǤ礦
äѻjQueryǤ礦äȻ⹥ˤʤޤ


: Prototype vs. jQuery

: Prototype vs. jQueryȤäΤɤǤߤޤ

ɤ餫ȤСPrototypeߤʴˤʤäƤΤǤ錄Ʊäꤷޤ

jQueryɤǤϤ狼ΤǤºݤΥɽ񤤤Ƥȡʤ󤫤äѤPrototypeä꤯ΤǤ
jQueryݤϡϤʤ󤫥ץ޸ǤϤʤǥʸäƴʤƤʴǤΤǡդͳ⤷ޤ󤬡
Dojoä줿Ȥʤä
ExtJSϷ빽äɡʤ󤫡ݤơޤǤäƵˤϤʤޤǤäGWTΤۤǤƤGWTϹǤ

jQuery

ǥΥС˼䤵줿ΤǤjQueryȤäƤơ٥ȥϥɥʥܥ󤬥å줿Ȥ˸ƤФؿΤȡˤǡthis򻲾Ȥȡʤ󤫤ȤȤǤ
빽ǤϤޤͤΤǤϤʤȻפäȽ񤤤Ƥߤ褦Ȼפޤ
JavaScriptǤprototypeǥ饹Τ褦ʤΤǤޤ̤prototypeȤʤƤǤޤˡ¾Υ֥ȻظC#JavatˤˤʤƤͤϡĤƤؿǤthisλȤϾ˼ʬȤΥ饹Υ󥹥󥹤ȻפäƤޤޤ
JavaScriptǤϤϤʲΤ褦ʥ饹ʤȸƤФƤˤ硢

function MyClass(){
? //button1Υå٥ȥϥɥ
? $('#button1').bind('click', this.onButtonClicked);
}

MyClass.prototype = {
? //button1򥯥åȤδؿƤФޤ
? onButtonClicked : function(e){
??? this.sayHello();
? },

? sayHello : function(){
??? alert('hello world!!');
? }
}

츫button1򥯥å 'hello world!!' åɽ뤫Ȼפޤºݤˤundefined 顼ˤʤäƤޤޤ
ϡonButtonClickedؿ this ȤΤϡ MyClassΥ󥹥󥹤ǤϤʤbutton1ΤΤǤJavaScriptλȤ߾Ѥޤ
ǤϡonButton1ClickedMyClassΥ󥹥󥹤򻲾ȤˤϤɤФΤȤȡ٥Ȥꤹˡʬ(this)ؤλȤ򥤥٥ȥϥɥϤƤɬפޤ
jQueryǤϥ٥Ȥꤹؿ bind 2ѥ᡼Ǥդξꤹ뤳ȤǤΤǡꤷƤޤ

? $('#button1').bind('click', {"self" : this},? this.onButtonClicked);

Τ褦ˡ2ѥ᡼JSONǼͳ˥ǡǤޤǤ self Ȥ̾ thisؤλȤꤷƤޤ
ǡ򥤥٥ȥϥɥǻȤϡ

? onButtonClicked : function(e){
??? e.data.self.sayHello();
? }

äƴǡ٥Ȱ data ץѥƥͳǻȤǤޤ
ǡe.data.self ȤΤϡۤɻꤷ"self" : this ΤȤʤΤǡĤޤMyClassΥ󥹥󥹤ؤƤޤ
¿ʬjQueryǤϤʴǻȤݻ뤷ˡʤȻפޤְäƤ餪Ƥ
ϡйϤPrototypeե졼Ǥϡ٥Ȥꤹݤˡ
bindAsEventListener(this)
Ȥ뤳Ȥǡľ˥٥ȥϥɥ this 򻲾ȤƤȴ̤ MyClassΥ󥹥󥹤˥Ǥޤ
ΤդjQueryݡȤʤΤäԻ׵ĤʤΤǤ
jQueryȤΤǤʤ󤫡դääơޤPrototypeȤäƤޤ
ϡñ˻jQuery­ʤ⤷ޤΤǡïܤС󶵤Ƥ




ץե

Ȥ

C#ɻŻRubyФʳȯԡ
ǶDockerȤؿȤAngularJS˥ϥޤäƤ롣
¢ȤĮȤȤ˽ס

QR
QR
  • 饤֥ɥ֥