Skip to content

Instantly share code, notes, and snippets.

@jacwright
Created April 28, 2015 15:51
Show Gist options
  • Save jacwright/9b1a16b6e67a474bfe90 to your computer and use it in GitHub Desktop.
Save jacwright/9b1a16b6e67a474bfe90 to your computer and use it in GitHub Desktop.
Aliases existing chip bindings to use [*], (*), and {*}
# Add aliases for the bindings to use brackets, e.g. bind-value becomes [value]
chip.Binding.bindings.slice().forEach (binding) ->
name = binding.name
return if name.indexOf('-*') >= 0
if binding.name.indexOf('bind-') is 0 || binding.name.indexOf('attr-') is 0
name = '[' + name.replace(/^(bind|attr)-/, '') + ']'
chip.binding name, binding.priority, binding.handler
else if binding.name.indexOf('on-') is 0
name = '(' + name.replace(/^on-/, '') + ')'
chip.binding name, binding.priority, binding.handler
attrHandler = chip.binding('attr-*')
chip.binding '[*', (element, attr, controller) ->
attr.match = attr.name.replace(/^\[|\]$/g, '')
attr.name = 'attr-' + attr.match
attrHandler(element, attr, controller)
eventHandler = chip.binding('on-*')
chip.binding '(*', (element, attr, controller) ->
attr.match = attr.name.replace(/^\(|\)$/g, '')
attr.name = 'on-' + attr.match
eventHandler(element, attr, controller)
localHandler = chip.binding('local-*')
chip.binding '{*', (element, attr, controller) ->
attr.match = attr.name.replace(/^\{|\}$/g, '')
attr.name = 'local-' + attr.match
localHandler(element, attr, controller)
@jacwright
Copy link
Author

This allows Angular 2.0-like syntax. I like it because it is shorter and more importantly it is more visible in your HTML what is a binding vs a regular attribute.

Note: There was a little modification in chip/src/binding.coffee so support this fully, which I can add if requested.

Examples:
bind-text="foo" can be also written [text]="foo" and on-click="bar()" can be (click)="bar()"

<div [each]="item in items">
  <img [src]="item.avatar">
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment