我在Ember应用程序中的表单中有以下字段结构:
<div class="box">
<label>Name</label>
{{text-input value=model.name}}
</div>
<div class="box">
<label>Gender</label>
{{chosen-select value=model.gender content=selectOptions.genders}}
</div>
text-input
标记是指从Ember.TextField
继承的组件。 chosen-select
标记引用从Ember.Select
继承的另一个组件。 chosen-select
提供的一种行为是,它会将<select>
元素转换为chosen select,以便更好地与用户进行互动。
这样做之后,每当用户点击字段周围框中的任何地方时,我都希望将焦点放在任何输入字段(文本字段或选择)上,而不仅仅是在字段或其标签上。我能够使用下面的代码成功地使用文本输入字段(纯jquery,这里不需要ember):
$(document).on 'click', '.box', ->
$(this).find('input').focus()
通过将click事件处理程序附加到文档,我能够捕获在声明此事件处理程序时不存在的.box
元素的单击。结果是,只要单击.box
元素,其中的文本输入字段(如果有)就会获得焦点。
也可以选择
我希望实现包含所选select的.box
元素的等效行为,即在单击周围.box
时以编程方式打开select的下拉列表。
根据chosen's options documentation,如果我们想要以编程方式指示所选控件打开其下拉列表,我们必须向其发送chosen:open
事件,因此尝试将其添加到上面的代码中:
$(document).on 'click', '.box', ->
$(this).find('input').focus()
$(this).find('select').trigger('chosen:open')
它不起作用。它也没有任何错误。然后我注意到如果我从浏览器的js控制台发出最后一行它可以工作(当然,用this
元素替换.box
代替Ember.run
。从控制台发出时,该框内的相应选择将打开其下拉列表。但是当从上面的click事件处理程序发出时它不起作用。
所以我想我不需要直接在该上下文中发出此命令,而是使用一些Ember的Ember.run.next
函数,例如{{1}}和其他一些函数。但是我没有运气,而且我已经尝试了各种各样的事情,甚至在一小段时间后触发事件。
我希望这里有一些Ember.js专业知识的人可以解决这个问题。我认为这个问题是在ember的时候,因为如果我得到一个没有余烬的同等html(来自前端设计师,它给了我和我一起工作的html),这件事也可以从click事件中完美运行。