Question

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

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

0 个答案: