Inline-if inside button triggers deprecation warning and error

Question

I'm trying to bind whether a button is active or disabled on a computed property but get this depcreation warning and error afterwards.

This is troublesome button (Ember 1.11.1 here):

<button {{ action 'loadMore' }} {{if canLoadMore 'active' 'disabled'}}>Load More Posts...</button>

This warnining and error:

DEPRECATION: Returning a string of attributes from a helper inside an element is deprecated.
Uncaught TypeError: Cannot read property 'replace' of undefined

on this function:

if (value) {
  Ember['default'].deprecate('Returning a string of attributes from a helper inside an element is deprecated.');

  var parts = value.toString().split(/\s+/);
  for (var i = 0, l = parts.length; i < l; i++) {
    var attrParts = parts[i].split('=');
    var attrName = attrParts[0];
    var attrValue = attrParts[1];

    attrValue = attrValue.replace(/^['"]/, '').replace(/['"]$/, '');

    env.dom.setAttribute(domElement, attrName, attrValue);
  }

score 4 · Accepted Answer · answered Apr 10 '15 at 13:08

4

I'm assuming you want to set an active class on the button element based on the canLoadMore property. In that case, read on.

Your button code evaluates to this something like this html:

<button data-ember-action="1234" 'active'>

When you probably want this:

<button data-ember-action="1234" class='active'>

So change your code:

<button {{ action 'loadMore' }} {{if canLoadMore 'active' 'disabled'}}>Load More Posts...</button>

to:

<button {{ action 'loadMore' }} class="{{if canLoadMore 'active' 'disabled'}}">Load More Posts...</button>

answered Apr 10 '15 at 13:08

Kori John Roys

2,621
1
19
27

This works as intended but what i was trying is to have something like this originally ` – Hedge Apr 13 '15 at 10:45
1

Ah, in that case check out this jsbin: http://jsfiddle.net/Lehjuw9x/ summary: you need `disabled={{if canLoadMore null 'disabled'}}` – Kori John Roys Apr 13 '15 at 14:38

score 1 · Answer 2 · answered Apr 10 '15 at 13:05

Try this:

<button {{ action 'loadMore' }} 
    class="{{if canLoadMore 'active' 'disabled'}}">Load More Posts...</button>

Anyway, the TypeError (that is triggered because your strings dont contain '=' as in <button {{ action 'loadMore' }} class={{if canLoadMore 'class="active"' 'class="disabled"'}}>Load More Posts...</button> should not occur (read: a more meaningful error message would be very helpful).

But then it's a deprecated feature that will disappear anyway.

score 0 · Answer 3 · answered Apr 13 '15 at 05:58

0

You can use the {{bind-attr}} helper:

{{bind-attr class=property:classIfTrue:classIfFalse :classThatDoesntCare}}

So your example could be something like:

<button {{action "loadMore"}} {{bind-attr class="model.canLoadMore:active:disabled :btn :btn-default"}}>Load More Posts...</button>

answered Apr 13 '15 at 05:58

Seth Brasile

79
1
6

2

`{{bind-attr}}` is deprecated as of Ember version 1.11 – Hedge Apr 13 '15 at 10:41
There's an alternative now, but I don't see it being deprecated and I'm not getting any deprecation warnings. Could you provide a link? [this](http://emberjs.com/blog/2015/03/27/ember-1-11-0-released.html) doesn't say anything about it being deprecated. – Seth Brasile Apr 13 '15 at 17:59
Sorry, I looked up the deprecation guides and you're right. There's no mention yet about a deprecation of the bind-attr-syntax. I still think it will happen in Ember 2.0 – Hedge Apr 14 '15 at 06:22

Inline-if inside button triggers deprecation warning and error

3 Answers3