Question

我试图为新项目中的可点击图标制作一个Ember组件（在此过程中了解Ember）并遇到属性绑定问题：

如何从呈现的HTML中删除空属性绑定？

根据官方指南，我可以绑定一个字符串或数字，让属性用字符串/数字填充或绑定到一个布尔值来切换属性（假设属性和类名遵循相同的结构），但如果我传递一个布尔值false来删除属性，它的值只是设置为字符串＆＃34; false＆＃34;。

组件代码

export default Ember.Component.extend({
  tagName: 'i',
  classNameBindings: ['icon'],
  attributeBindings: ['title', 'roleAttribute:role'],
  icon: 'blank', // Defaults to a blank icon
  title: '', // Defualts to empty title
  click() {
    this.sendAction();
  },
  roleAttribute: function() {
    return this.get('action') ? 'button' : false;
  }.property()
});

模板中的用法

{{ui-icon icon="close" title="Close" action="hide"}}
{{ui-icon icon="close" title="Close"}}

预期结果（为清晰起见，删除了Ember ID＆＃39;和类名称）

<i role="button" title="Close" class="close"></i>
<i title="Close" class="close"></i>

真实结果（为清晰起见，删除了Ember ID＆＃39;和类名称）

<i role="button" title="Close" class="close"></i>
<i role="false" title="Close" class="close"></i>

如果我传递一个空字符串而不是false，我仍然可以获得该角色，但没有分配值，但我根本不需要任何角色。

Answer 1

根据问题主题中的 this comment ，您应该返回null而不是false来删除属性。

<强> Here is the working demo

删除Ember组件中的空属性绑定

1 个答案: