在Ember.js应用程序中选择不触发的选择事件

时间:2015-01-24 17:55:21

标签: ember.js jquery-chosen

我在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事件中完美运行。

0 个答案:

没有答案