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属性在button元素上设置一个活动类。在这种情况下，请继续阅读。

您的按钮代码的评估结果如下：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>

内联 - 如果内部按钮触发弃用警告和错误

3 个答案: