Using monocle mustache for chaining.

[Allen Wirfs-Brock]

For some reason, the code in the original most formatted with a lot of vertical white space in my mailer.  I tried to fix it below:
On Nov 11, 2011, at 10:50 AM, Erik Arvidsson wrote:

> We've all looked at jQuery code and envied the conciseness of its chaining APIs. Most of us also looked at it and thought; Yuk, making everything a method of jQuery and always return the jQuery object is ugly.
> 
> However, I (with some help) realized that the .{ operator can be used to solve most of these chaining scenarios without any changes to any API.
> 
> Take this jQuery sample code:
> 

$('#my-element').
  css({
    'color': 'red',
    'padding': '5px'
  }).
  text('Hello');
> 
> 
> 
> 
> 
> With the 'stache:
> 
document.querySelector('#my-element').{
  style.{
    'color': 'red',
    'padding': '5px'
  }.     // should be , instead of .   ??????????????
  textContent: 'Hello'
};
> 
> One could easily see some extensions to make this even more useful. For example allowing method calls and member lookups etc would sweeten the deal. Here is a more advanced example that assumes we have some useful properties on the returned DOM collections:
> 
> jQuery:
> 

$('#myTable').
  find('.firstColumn').
    css({'background': 'red', 'border': '2px solid black'}).
    text('first column').
  end().
  find('.lastColumn').
       css('background','blue').
       text('last column');
> 
> 
> 
> With the 'stache:
> 
> 
document.querySelector('#myTable').{
  querySelectorAll('.firstColumn').{
    style.{background: 'red', border: '2px solid black'},
    textContent: 'first column'
  },
  querySelectorAll('.lastColumn').{
    style.{background: 'blue', border: '2px solid black'},
    textContent: 'last column'
  }
};


> 
An extension that I've consider is to allow nested stashes:

foo.{
     bar: 5,  //add "bar" property to foo
     baz.{bam:6}  //add "bam" property to object that is the value of foo.baz
}

Using [ ] bracketed property keys, they could be computed:

foo.{
     bar: 5,  //add "bar" property to foo
     [foo.someSringValuedFunction()].{bam:6}  //add "bam" property to object that is the value of foo.baz
}

but it isn 't clear that it would cover what you are trying to do there. Also I no longer like [ ] for computed property names in literals...


> I've also been told that this is just another form of Smalltalk's message cascade.
> 

Maybe a cascade essentially captures the first method "receiver" and uses it for a sequence of method calls.  I smalltalk:

  foo bar; baz; bam.

(; is the cascade operator) pretty much means:
  temp = foo.
  temp bar.
  temp baz.
  temp bam.

Allen



-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20111111/d24ac519/attachment-0001.html>