动态设置组件tagName

Question

根据我所看到的，这在默认情况下是不可能的，但我希望新的Glimmer引擎能够改善这一点。我正在为一个表创建一个内联编辑组件。默认情况下，我希望组件是td元素，但有选择地成为交互上的输入元素。

// components/inline-edit.js
tagName: 'td',
click: function() {
    this.set('tagName', 'input');
    this.rerender(); // prolly not necessary, but thought I'd give it a go
}

不幸的是，这不起作用。我是不是遗漏了什么？我使用的是Ember 1.13.3，但我需要选择Glimmer才能正常工作吗？

谢谢。

Answer 1

为什么不将输入字段显示为隐藏，然后单击“取消隐藏”并进行聚焦？<td>不能简单地变成<input>，因为<input>不能是<tr>的直接子级，这也没有意义。

Answer 2

如果一个input元素对你不起作用，那么使用inline contenteditable怎么样：

// components/inline-edit.js
export default Ember.Component.extend({

  tagName: 'span',
  attributeBindings: ['contenteditable'],
  contenteditable: true,
  ...
});

然后在<td>中使用它

{{#each}}
<tr>
  <td>{{inline-edit}}</td>
</tr>
{{/each}}