Skip to content

Instantly share code, notes, and snippets.

@jbryson3
Last active September 29, 2015 16:51
Show Gist options
  • Save jbryson3/b01062650f17267c2014 to your computer and use it in GitHub Desktop.
Save jbryson3/b01062650f17267c2014 to your computer and use it in GitHub Desktop.
Ember.js bind-attr upgrade deprecation refactor
{{! bound property }}
<div {{bind-attr class="myProperty"}}>
<div class={{myProperty}}> {{! no need for wrapping quotes }}
{{! static class }}
<div {{bind-attr class=":static-class myProperty"}}>
<div class="static-class {{myProperty}}">
{{! inline if/else }}
<div {{bind-attr class="myPropertyIsTrue:awesome:lame"}}>
<div class={{if myProperty 'awesome' 'lame'}}>
{{! unless }}
<div {{bind-attr class="myPropertyIsTrue::lame"}}>
<div class={{unless myProperty 'lame'}}>
{{! multiple true classes }}
<div {{bind-attr class="myPropertyIsTrue:awesome myPropertyIsTrue:doubleAwesome"}}>
<div class={{if myProperty 'awesome doubleAwesome'}}>
@jbryson3
Copy link
Author

Suggested style guide:
All static properties come first, then all bound properties, then all inline if syntax.

<div class="
  static-prop1 static-prop2
  {{boundProp1}} {{boundProp2}}
  {{if isTrue1 'true' 'false'}} {{unless isTrue2 'double-false'}}
">

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