Question

我在使用下拉菜单在ember js app中正确绑定时遇到问题，因为我在列表内部点击了action个处理程序并且基础事件存在冲突。

模板名称：

<a data-dropdown="groupDrop" id="groupDropdownLink" class="button radius tiny success dropdown">
   Move Selected To Group ({{selectedCount}})
</a>
<br>
<ul id="groupDrop" data-dropdown-content class="f-dropdown">
  {{#each eventGroups}}
    <li {{action 'moveToGroup' this}}><a>{{name}}</a></li>
  {{/each}}
</ul>

当我运行$（document）.foundation（）时，它会覆盖动作处理程序，当我删除它时不会触发下拉列表。

我认为我需要做的是在a标记中添加一些动作处理程序，然后让它打开下拉列表，这样我就无法使用基础处理程序了。

Answer 1

触发下拉列表所需的功能是Foundation.libs.dropdown.toggle

传入下拉链接的jQuery对象以切换它

你可以这样解决：

模板：

<a data-dropdown="groupDrop" {{action 'showDropdown'}} id="groupDropdownLink" class="button radius tiny success dropdown">
   Move Selected To Group ({{selectedCount}})
</a>
<br>
<ul id="groupDrop" data-dropdown-content class="f-dropdown">
  {{#each eventGroups}}
    <li {{action 'moveToGroup' this}}><a>{{name}}</a></li>
  {{/each}}
</ul>

控制器：

Ea.GroupGuestsController = Em.ArrayController.extend
  actions:

    showDropdown: ->
      Foundation.libs.dropdown.toggle($('#groupDropdownLink'))

如何在javascript（在emberjs应用程序内）手动切换Foundation 5下拉列表？

1 个答案: