Bind-attr migration strategy

Design
1

Hi!

Since Ember 1.13 bind-attr is deprecated. I wonder what is the best way to come around this deprecation. I found two solution which don’t seem perfect to me:

Version 1:

    // in controller
    ...
    showCss: function() {
            return (this.get('finished')) ? 'show' : 'hide';
    }.property('finished')

    // in template
    <div class="{{showCss}}">...</div>

Version 2:

    // in template
    <div class="{{#if finished}} show {{else}} hide {{/if}}">...</div>

How did you solve the bind-attr deprecation? Is there a nicer way than version 1 & 2?

Thanks for your opinions

2

There’s an inline if helper:

<div class="{{if finished 'show' 'hide'}}">...</div>
3

@engwan: I didn’t know about this helper. Thanks for the hint. Nevertheless it doesn’t make my templates more readable :smiley: So if I have two conditional css classes it becomes quite messy:

<div class="{{if finished 'show' 'hide'}} {{if fadeOut 'fadeOut' 'fadeIn'}}">...</div>

For css classes I liked bind-attr, maybe I’m just to nostalgic :smiley:

4

Yeah, the bind-attr syntax can be shorter sometimes, but the new syntax is much more easier to understand specially for those new to ember.

5

Just a side-note, in 2.0 bind-attr will remain supported in the form of an addon GitHub - emberjs/legacy-bind-attr: {{bind-attr}} support for >= 2.0.0-beta.2

This will allow upgrading your app in piece meal versus one sweeping update.