Inline-if inside 按钮触发弃用警告和错误答案

【问题标题】：Inline-if inside button triggers deprecation warning and errorInline-if inside 按钮触发弃用警告和错误
【发布时间】：2015-06-16 04:12:00
【问题描述】：

我正在尝试在计算属性上绑定按钮是 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);
  }

【问题讨论】：

标签： ember.js ember-cli htmlbars

【解决方案1】：

试试这个：

<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> 中的“=”而触发的）（阅读：更有意义的错误消息会非常有帮助）。

但它是一个已弃用的功能，无论如何都会消失。

【讨论】：

【解决方案2】：

我假设您想根据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>

【讨论】：

这可以按预期工作，但我正在尝试的是最初拥有这样的东西<button disabled>
啊，在这种情况下查看这个jsbin：jsfiddle.net/Lehjuw9x 摘要：你需要disabled={{if canLoadMore null 'disabled'}}

【解决方案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>

【讨论】：

{{bind-attr}} 自 Ember 1.11 版起已弃用
现在有一个替代方案，但我没有看到它被弃用，我也没有收到任何弃用警告。你能提供一个链接吗？ this 没有说明它已被弃用。
抱歉，我查阅了弃用指南，您是对的。目前还没有提到弃用 bind-attr-syntax。我仍然认为它会在 Ember 2.0 中发生