Question

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

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

值
组件本身，作为父
一个函数，它将在'mouseLeave'事件上运行

Answer 1

您可以使用focusOut事件和观察者的组合。

Ur模板看起来像

{{#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')

<强> Working demo.

Answer 2

更灵活的方式是：

{{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行为。

Demo

Answer 3

这个可编辑的表格小部件也可以为你工作，虽然它会改变整个表格：http://mindmup.github.io/editable-table/

灰烬可编辑表格单元格

3 个答案: