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

Question

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

Это кнопка хлопотно (Ember 1.11.1 здесь):

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

Это warnining и ошибка:

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

Так что ваш пример может быть что-то вроде:

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