作者歸檔：船長

http://www.sergiopereira.com/articles/prototype.js.html

Chapter 10. Prototype Reference
10.1. Ajax Support

Ajax.Request, Ajax.Updater, and Ajax.PeriodicalUpdaterall of which inherit from Ajax.Base. After that is the Ajax.Responders object, which handles global events related to Ajax calls.

callback
new Ajax.Request('/data.html', {
  method: 'get',
  onComplete: showResponse
});

// alert the returned value
function showResponse(request) {
  alert(request.responseText);
}

callback could also be defined inline.
====>
new Ajax.Request(' /data.xml', {
  method: 'get',
  onComplete: function(request){ alert(request.responseText); }
});

defined for specific HTTP response codes
new Ajax.Request(' /data.xml', {
  method: 'get',
  on404: function(request){ alert('Not found'); },
  on500: function(request){ alert('Server error'); }
});

Ajax Updaters

// <div id="target">(To be replaced)</div>

new Ajax.Updater('target', '/data.html', {method: 'get'});

This next example is the same as above, but it updates the element only if the request was successful and alerts the user if not:
// <div id="target"></div>

new Ajax.Updater({success: 'target'}, '/data.html', {
  method: 'get',
  onFailure: function(request) { alert('Sorry. There was an error.') }
});

Periodical Ajax Updaters
/ <div id="target"></div>

new Ajax.PeriodicalUpdater('target', '/data.html', {
  method: 'get',
  frequency: 2
});

Global Responders
Ajax.Responders.register({
  onCreate: function(  ){
    $('spinner').show(  );
  },
  onComplete: function(  ) {
    if(Ajax.activeRequestCount == 0)
      $('spinner').hide(  );
  }
});

10.2. DOM Manipulation
 $( )
document.getElementById( )
// <p id="one">One</p>
// <p id="two">Two</p>

$('one').toString(  );
// => '[object HTMLParagraphElement]'

$('one','two').toString(  );
// => [object P],[object P]

$($('one')).toString(  );
// => [object HTMLParagraphElement]

$F( )
$F( element ) returns the value of any  field input control
// <input type="text" id="userName" value="Joe Doe">
// <select id="state">
//   <option value="NY">New York</option>
//   <option value="CA" selected="selected">California</option>
// </select>

$F('userName');
// => "Joe Doe"

$F('state');
// => "CA"

Selector
The Selector class (and its accompanying $$( ) method) allows you to reference page elements by their CSS selectors

$$('form#foo input[type=text]').each(function(input) {
  input.setStyle({color: 'red'});
});

// By tag name, including wildcard
$$('strong')
$$('*')

// By id and class
$('#foo')
$$('.bar')

// By combinations of tag, id, and class
$$('strong#foo')
$$('string.bar')
$$('string.bar.baz')
$$('#foo.bar')
$$('.bar#foo')
$$('#foo.bar.baz')
$$('strong#foo.bar')
$$('strong.bar#foo')

// By ancestors
$$('#foo strong *')
$$('strong#foo span')

// By attribute existence
$$('h1[class]')

// By attribute value and negated value
$$('a[href="#"]')
$$('a[href!=#]')

// By whitespace-tokenized attribute value
$$('a[class~="internal"]')

// By hyphen-tokenized attribute value
$$('*')

// By multiple attribute conditions
$$('a[class~=external][href="#"]')

// Combining multiple expressions
$('#foo', '#bar')

 Examples
// Create a Selector instance
fooFinder = new Selector('.foo');

// Find all elements in the document with the class 'foo'
fooFinder.findElements(  );

// Find all elements within the 'container' element with the class 'foo'
fooFinder.findElements($('container'));

// Determine whether the 'bar' element has the class 'foo'
fooFinder.match($('bar'));

// Find all elements with class 'foo' from the descendants of 'container'
Selector.matchElements($('container').descendants(  ), '.foo');

// Find the first element with the class 'foo' from the descendants of 'container'
Selector.findElement($('container').descendants(  ), '.foo');

// Find the second element with the class 'foo' from the descendants of 'container'
Selector.findElement($('container').descendants(  ), '.foo', 1);

// Find all elements with the class 'foo' within 'container'
Selector.findChildElements($('container'), ['.foo']);

// Find all elements with the class 'foo' or the class 'bar' within 'container'
Selector.findChildElements($('container'), ['.foo', '.bar']);

Element Methods
Element.toggle('target');
var myElement = $('target2');
Element.update(myElement, 'Hello');

Alternatively
$('target').toggle(  );
var myElement = $('target2');
myElement.update('Hello');

$('target').update('Hello').addClassName('big').show(  );

10.2.5. class Element.ClassNames
10.2.6. Inserting Content

// <span id="name">Douglas</span>
new Insertion.Before('name', 'Hello, ');
new Insertion.Top('name', 'Scott ');
new Insertion.Bottom('name', ' Raymond');
new Insertion.After('name', '.');

10.2.7. Element Positioning

10.2.8. Form Observers

10.3. Core Extensions
10.3.1. Array Extensions
10.3.2. Hashes
10.3.3. Ranges
10.3.4. Enumerable
…..

with<Programming Ruby>
Chapter 4
Containers, Blocks, and Iterators

Containers

Arrays
a = [ 3.14159,  "pie", 99 ]
a.class         Array
           →
a.length        3
           →
a[0]            3.14159
           →

b = Array.new
b.length   →0
b[0] = "second"
b[1] = "array"
b          → ["second", "array"]

   Positive → 0                                         Negative
                      1     2     3     4    5      6
    indices                                        −1 ← indices
              −7     −6    −5    −4    −3   −2
          a = “ant” “bat” “cat” “dog” “elk” “?y” “gnu”
      a[2] →              “cat”
     a[-3] →                          “elk”
  a[1..3] →         “bat” “cat” “dog”
a[-3..-1] →                           “elk” “?y” “gnu”
 a[4..-2] →                           “elk” “?y”

the index to [ ]= is two numbers (a start and a length) or a range
a = [ 1, 3, 5, 7, 9 ]   [1, 3, 5, 7, 9]
                      →
a[2, 2] = ’cat’         [1, 3, "cat", 9]
                      →
                        [1, 3, "dog", "cat", 9]
a[2, 0] = ’dog’       →
                        [1, 9, 8, 7, "dog", "cat", 9]
a[1, 1] = [ 9, 8, 7 ] →
a[0..3] = []            ["dog", "cat", 9]
                      →
a[5..6] = 99, 98        ["dog", "cat", 9, nil, nil, 99, 98]
                      →

Hashes (associative arrays, maps, or dictionaries)
h = { 'dog' => 'canine', 'cat' => 'feline', 'donkey' => 'asinine' }
h.length   →3
h['dog']   → "canine"
h['cow'] = 'bovine'
h[12]    = 'dodecine'
h['cat'] = 99
h          → {"cow"=>"bovine", "cat"=>99, 12=>"dodecine",
               "donkey"=>"asinine", "dog"=>"canine"}

Implementing a SongList Container

class SongList
  def append(song)
    @songs.push(song)
    self
  end
end

class SongList
  def delete_first
    @songs.shift
  end
  def delete_last
    @songs.pop
  end
end

class SongList
  def [](index)
    @songs[index]
  end
end

Blocks and Iterators

class SongList
  def with_title(title)
    @songs.find {|song| title == song.name }
  end
end
find is an iterator
iterator: a method that invokes a block of code repeatedly
    def three_times
      yield
      yield
      yield
    end
    three_times { puts "Hello" }
produces:
    Hello
    Hello
    Hello

i1, i2 = 1, 1 # parallel assignment (i1 = 1 and i2 = 1)

def fib_up_to(max)
  i1, i2 = 1, 1        # parallel assignment (i1 = 1 and i2 = 1)
  while i1 <= max
    yield i1
    i1, i2 = i2, i1+i2
  end
end
fib_up_to(1000) {|f| print f, " " }

if they appear for the ?rst time in the block, they’re local to the block. If instead they ?rst appeared outside the block, the variables will be shared between the block and the surrounding environment.
a = [1, 2]
b = 'cat'
a.each {|b| c = b * a[1] }
a                 [1, 2]
              →
b                 2
              →
defined?(c)       nil
              →

class Array
  def find
    for i in 0…size
      value = self[i]
      return value if yield(value)
    end
    return nil
  end
end
[1, 3, 5, 7, 9].find {|v| v*v > 30 }   7
                                     →
[ 1, 3, 5, 7, 9 ].each {|i| puts i }
["H", "A", "L"].collect {|x| x.succ } ["I", "B", "M"]

[1,3,5,7].inject(0) {|sum, element| sum+element}           16
                                                         →
[1,3,5,7].inject(1) {|product, element| product*element}   105
                                                         →

if inject is called with no parameter,it uses the ?rst element of the collection as the initial value and starts the iteration with the second value.
[1,3,5,7].inject {|sum, element| sum+element}           16
                                                      →
[1,3,5,7].inject {|product, element| product*element}   105
                                                      →

Blocks for Transactions
class File
  def File.open_and_process(*args)
    f = File.open(*args)
    yield f
    f.close()
  end
end

 *args, meaning “collect the actual parameters passed to the method into an array named args

Blocks Can Be Closures

songlist = SongList.new
class JukeboxButton < Button
  def initialize(label, &action)
    super(label)
    @action = action
  end
  def button_pressed
    @action.call(self)
  end
end
start_button = JukeboxButton.new("Start") { songlist.start }
pause_button = JukeboxButton.new("Pause") { songlist.pause }
                                                                         &action,Ruby looks for a code block whenever that method is called. That code block is converted to an object of class Proc and assigned to the parameter. You can then treat the parameter as any other variable. In our example, we assigned it to the instance variable @action. When the callback method button_pressed is invoked, we use the Proc#call method on that object to invoke the block.

method lambda, which converts a block to a Proc object.

def n_times(thing)
  return lambda {|n| thing * n }
end
p1 = n_times(23)
p1.call(3)   → 69
p1.call(4)   → 92
p2 = n_times("Hello ")
p2.call(3)   → "Hello Hello Hello "

with <ajax on rails>

make fake form with the combination of link_to_remote and :submit option

3.4 Ajax Forms

form_for
remote_form_for

3.5

<%= form_tag :action => 'reverse' %>
  <p>Text to reverse: <%= text_field_tag 'text_to_reverse' %></p>
  <p id="reversed2"></p>
  <p><%= submit_to_remote 'submit', 'Reverse!',
          :update => 'reversed2',
          :url => { :action => 'reverse' } %></p>
<%= end_form_tag %>
the form can be submitted both via Ajax or non-Ajax methods. Consider this variation with two submit buttons
a common application for submit_to_remote would be checking a form for validity before actually submitting it for creation.

Form Observers

If :with doesn't contain an equal sign character (=), it's interpreted as a name for the parameterso foo becomes 'foo='+value. But if :with does contain an equal sign, it remains untouchedso foo=bar remains foo=bar.

:function => "alert(value)"

Observing an Entire Form
<form id="myForm">
  <p>Text to reverse: <%= text_field_tag 'text_to_reverse' %></p>
  <p id="reversed"></p>
</form>

<%= observe_form 'myForm',
      :update => "reversed",
      :url    => { :action => 'reverse' } %>
an observer for the form with the ID myForm, so that whenever any of its fields change, an Ajax.Updater call is created accordingly, which passes the serialized form values to the server.

<%= render :partial => "person" %>

the partial is named "person," the main template will look for an instance variable @person, and pass it to the partial as a local variable, person.if the instance variable doesn't match the name of the partial, you'd explicitly pass it, like this:

<%= render :partial => "person", :locals => { :person => @scott } %>
All the key/value pairs in the :locals hash will be made into local variables for the partial.

<%= render :partial => "person", :collection => @people %>
In this example, the main template has an array @people that will be looped through, passing a local variable person to the partial.

render :layout => false
def reverse
  @reversed_text = params[:text_to_reverse].reverse
  render :layout => false
end

with <Ajax on Rails>
Chapter 2 .Getting Our Feet Wet

S2.1. The Old-Fashioned Way
<p><a href="#" onclick="asyncAlert(  )">Call async server-side</a></p>
<script type="text/javascript">
  function asyncAlert(  ) {
    //Call server(IE-safe)
    function getRequestObject(  ) {
      try { return new XMLHttpRequest(  ) } catch (e) {}
      try { return new ActiveXObject("Msxml2.XMLHTTP") } catch (e) {}
      try { return new ActiveXObject("Microsoft.XMLHTTP") } catch (e) {}
      return false
    }
    var request = getRequestObject(  );
    request.open('get', '/chapter2/myresponse');
    //we define a function that checks to see if readyState is 4 (which means the request is complete)
    request.onreadystatechange = function(  ) {
      if(request.readyState==4) alert(request.responseText);
    }
    request.send(  );
  }
</script>

s2.2. javascript Libraries and Prototype
Prototype Way:
<script src="/javascripts/prototype.js" type="text/javascript">
</script>
<p><a href="#" onclick="prototypeAlert(  );">Call with Prototype</a></p>
<script type="text/javascript">
 function prototypeAlert(  ) {
  new Ajax.Request('/chapter2/myresponse', { onSuccess: function(request) {
   alert(request.responseText);
  }})
 }
</script>

Update a element's innerHTML
<p><a href="#" onclick="updateElement(  )">Update element </a></p>
<p id="response"></p>
<script type="text/javascript">
  function updateElement(  ) {
    new Ajax.Request('/chapter2/myresponse', { onSuccess: function(request) {
      $('response').update(request.responseText);
    }})
  }
</script>

================>
<p><a href="#" onclick="updater(  )">Update with Ajax.Updater</a></p>
<p id="response2"></p>
<script type="text/javascript">
  function updater(  ) {
    new Ajax.Updater('response2', '/chapter2/myresponse');
  }
</script>

insert content:
<p><a href="#" onclick="appendToElement(  )">Append to element</a></p>
<p id="response3"></p>
<script type="text/javascript">
  function appendToElement(  ) {
    new Ajax.Updater('response3', '/chapter2/myresponse',
      { insertion:Insertion.Bottom });
  }
</script>
//insertions: Before, Top, Bottom, and After.

===============>
<p><a href="#" onclick="new Ajax.Updater('response4',
'/chapter2/myresponse', { insertion:Insertion.Bottom });">
Append to element</a></p>
<p id="response4"></p>