Javascript 余烬可编辑表格单元

目标： 我想制作一个可编辑的表格单元格组件。如果用户双击单元格，其内容将转换为输入。如果他/她在输入之外单击，或按enter键，单元格将返回其原始状态

到目前为止我拥有的： 我做了一个简单的版本，这是一个很好的起点。组件具有“编辑”状态。如果为false，则组件将显示该值。如果为true，则组件将显示一个输入框，并通过

• 价值
• 组件本身，作为父级
• 一个函数，将在“mouseLeave”事件上运行

---

您可以将

focusOut

事件和观察者结合使用

你的模板看起来像

{{#if edit}}
  {{input value=value focusOut=test parent=this}}
{{else}}
  {{value}}
{{/if}}

将此观察者添加到组件中

setInputFocus: function() {
  if(this.get('edit')) { 
    Em.run.scheduleOnce('afterRender', this, function() {
        this.$().find('input').focus();
    });
  }
}.observes('edit')

---

一种更灵活的书写方式是：

{{input value=value parent=this}}  //(removed mouseLeave=test)

然后在component.js中，您可以执行以下操作：

test: function(){
    console.log('mouse out');
    this.get('parent').set('edit', false);

}.on('focusOut', 'mouseLeave')

这样，您可以更灵活地处理事件。在上面的代码中，如果用户点击tab键，单元格将变得不可编辑，并且保留mouseLeave行为

---

这个可编辑表格小部件可能也适用于您，尽管它可以转换整个表格：

那么有什么问题吗？@blessenm问题：现在，如果鼠标离开，它会变回原来的状态，但我想在输入框外单击一下进行更改。将

mouseLeave

事件更改为

focusOut

@blessenm我已经尝试过了，但它不起作用。还尝试了“focus out”。@blessenm实际上它与focusOut一起工作，但首先我点击了它。（增加焦点）。不太好