我有一个简单的Emberjs组件,它包含一个输入字段和一个在divs
上迭代的items
集合。
最初,当输入字段为焦点时,items
div为display: none
,items
div获得display: block
。
集合中的每个项目都有一个action
处理程序,该处理程序命中selectItem
。使用此CSS,单击该项目不会执行该操作。
但是,如果将css规则:.items{ display: none; }
取出(JS小提琴上CSS的第18行),则单击进入操作。
这是一个JS小提琴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;
}
最佳答案
问题是当您失去输入框的焦点时,您将隐藏下拉列表。因此,即使您看起来好像在单击该元素,也确实没有单击任何东西。
话虽如此,您需要保持div可见,直到单击该操作为止(或任何其他原因)。
为此,我可能会使用Ember.TextField并连接到触发选项的focusIn
事件,然后在选择它时关闭。
自定义TextField
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/