css - 从显示无切换到显示 block 时，Emberjs 组件操作未触发

Question

我有一个简单的 Emberjs 组件，它由一个输入字段和一个遍历 items 的 div 集合组成。

最初，items div 是display: none 当输入字段获得焦点时，items div 得到display: block 。

集合中的每个元素都有一个 action 处理程序，它点击 selectItem。使用此 CSS，单击元素不会触发操作。

但是，如果 css 规则:.items{ display: none; 被取出(JS fiddle 上 CSS 中的第 18 行)，然后点击进入操作。

这是一个 JS fiddle http://jsfiddle.net/dylanjha/NQKvy/959/

一个简单的组件:

App.DropDownComponent = Ember.Component.extend({
    selectedName: null,
    items: [{id: 1, name: 'one'}, {id: 2, name: 'two'}],
    actions: {
        selectItem: function(item){
            alert('Selected ' + item.name);
            this.set('selectedName', item.name);
        }
    }
});

和组件的模板:

<script type="text/x-handlebars" id="components/drop-down">
  <h1>Drop Down</h1>
  <div>
   {{ input value=selectedName id="form-input" }}
    <div class='items'>
      {{#each item in items}}
        <div class='item' {{action 'selectItem' item}}>
           {{ item.name }}
        </div>
      {{/each}}
    </div>
  </div>
</script>

一些简单的 CSS 样式输入和元素 div

#form-input{
    width:200px;
    font-size:20px;
    padding:5px;
}
#form-input:focus + .items{
    opacity:1;
    display:block;
}
.items{
    font-size:20px;
    -webkit-transition:opacity .2s ease;
    width:200px;
    display:none;
}

Answer 1

问题是当您从输入框失去焦点时，您隐藏了下拉列表。因此，即使看起来您正在点击该元素，但实际上您什么也没点击。

话虽这么说，但在点击操作(或任何其他原因)之前，您需要一直保持 div 可见。

为此，我可能会使用 Ember.TextField 并连接到触发选项的 focusIn 事件，然后在选择时关闭。

自定义文本域

App.TextField = Ember.TextField.extend({
  focusOut: function(evt) {
    this.sendAction('focus-out');
  },
  focusIn: function(){
    this.sendAction('focus-in');   
  }
});

模板

{{view App.TextField value=selectedName id='form-input' focus-in='open'}}
<div {{bind-attr class=':items visible:showItems:hideItems'}}>
  {{#each item in items}}
    <div class='item' {{action 'selectItem' item}}>
       {{ item.name }}
    </div>
  {{/each}}
</div>

修改后的组件

App.DropDownComponent = Ember.Component.extend({
    selectedName: null,
    visible: false,
    items: [{id: 1, name: 'one'}, {id: 2, name: 'two'}],
    actions: {
        selectItem: function(item){
            alert('Selected ' + item.name);
            this.set('selectedName', item.name);
            this.set('visible', false);
        },
        open: function(){
            this.set('visible', true);
        }
    }
});

http://jsfiddle.net/w7e9c/