DEPRECATION: The `bind-attr` helper

[mmahalwy]

In ember 1.13.x and 2 beta, bind-attr is deprecated.

Any idea when this will be resolved?

[hwhelchel]

:+1: in the interim is there a way to resolve this?

[mixonic]

@hwhelchel bind-attr will be removed in Ember.js 2.0. Unfortunately it seems like there is no entry in the deprecation guide for this.

You should replace bind-attr statements with htmlbars-style attribute bindings. For example:

<div {{bind-attr data-something=someBinding}}></div>

Can be rewritten as:

<div data-something={{someBinding}}></div>

The more complex case of a class binding:

<div {{bind-attr class="isActive:active:disabled"}}></div>

Can be rewritten as:

<div class={{if isActive "active" "disabled"}}></div>

Multiple bindings can of course be used. A complex example:

<div 
  class="{{if isActive "active"}} {{unless isTall shortClassName}}"
  data-something={{if isActive (t "active") (t "disabled)}}
  ></div>

The latter above demonstrating use of a 3rd party t helper for translation. This unified style of bindings is easier for new developers to learn (though us old hands may miss bind-attr) and simpler (no special syntax for class).

[mixonic]

HA, sorry I thought this was an issue on the Ember repo :-)

[machty]

Emblem 0.6.0 no longer outputs bind-attr syntax.

[hwhelchel]

no worries thanks @machty and @mixonic

[mmahalwy]

Thanks all!

[hwhelchel]

.editor contenteditable="true" placeholder=placeholder is a template for one of my components. It's a contenteditable div. The bind-attr deprecation is rearing it's head again. I'm on 0.2.7 of ember-cli-emblem.

DEPRECATION: The `bind-attr` helper ('frontend/templates/components/markup-editor.hbs' @ L1:C30) is deprecated in favor of HTMLBars-style bound attributes.
        at isBindAttrModifier (/Users/Hoyt/Code/arches/frontend/bower_components/ember/ember-template-compiler.js:11519:34)
        at /Users/Hoyt/Code/arches/frontend/bower_components/ember/ember-template-compiler.js:11412:15
        at Walker.visit (/Users/Hoyt/Code/arches/frontend/bower_components/ember/ember-template-compiler.js:17975:7)
        at visitors.Program (/Users/Hoyt/Code/arches/frontend/bower_components/ember/ember-template-compiler.js:17985:16)
        at Walker.children (/Users/Hoyt/Code/arches/frontend/bower_components/ember/ember-template-compiler.js:18008:7)
        at Walker.visit (/Users/Hoyt/Code/arches/frontend/bower_components/ember/ember-template-compiler.js:17976:12)
        at TransformBindAttrToAttributes_transform [as transform] (/Users/Hoyt/Code/arches/frontend/bower_components/ember/ember-template-compiler.js:11407:12)
        at Object.preprocess (/Users/Hoyt/Code/arches/frontend/bower_components/ember/ember-template-compiler.js:17374:27)
        at compileSpec (/Users/Hoyt/Code/arches/frontend/bower_components/ember/ember-template-compiler.js:12529:37)

[thec0keman]

@hwhelchel the changes that fix the bind-attr issue are in 0.3.0 of ember-cli-emblem. Making that upgrade should resolve the deprecations.

[samtes]

What about concatenated classnames? How would you do it in HTMLBars?

<a {{bind-attr class="latestUser:descending latestUserOrder:ascending"}} href="#orderBy"> Latest user </a>

[adamdonahue]

Indeed, losing concatenated bindings would be annoying.

[thec0keman]

Emblem still supports the colon syntax, it just converts it into an inline-if for Ember: https://github.com/machty/emblem.js/blob/master/tests/integration/attributes-test.js#L360