2011/11/11 Erik Arvidsson <[email protected]>: > 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' > > > > }. > > 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' > > } > > }; > > > > I've also been told that this is just another form of Smalltalk's message > cascade. > > -- > erik
Does this depends on object key iteration order being defined as insertion order? Since an object can only have one property with a given name can chaining express patterns that the mustache can't? I.e. how would a chain with two calls to methods with the same name translate: foo.bar(x).baz(y).bar(z) ? _______________________________________________ es-discuss mailing list [email protected] https://mail.mozilla.org/listinfo/es-discuss
