Кнопка Inline-if inside вызывает предупреждение об устаревании и ошибку

Question

Я пытаюсь связать ли кнопка active или же disabled на вычисляемом свойстве, но получите это предупреждение об ошибке и ошибку впоследствии.

Это неприятная кнопка (Ember 1.11.1 здесь):

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

Это предупреждение и ошибка:

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

по этой функции:

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);
  }

Answer 1

Я предполагаю, что вы хотите установить активный класс для элемента кнопки на основе canLoadMore имущество. В этом случае читайте дальше.

Ваш код кнопки оценивается примерно так: html:

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

Когда вы, вероятно, хотите это:

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

Так что измени свой код:

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

чтобы:

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

Answer 2

Попробуй это:

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

Во всяком случае, ошибка TypeError (которая срабатывает, потому что ваши строки не содержат '=', как в <button {{ action 'loadMore' }} class={{if canLoadMore 'class="active"' 'class="disabled"'}}>Load More Posts...</button> не должно происходить (читай: более значимое сообщение об ошибке было бы очень полезно).

Но тогда это устаревшая функция, которая все равно исчезнет.

Answer 3

Вы можете использовать {{bind-attr}} помощник:

{{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>