Ember handlerbus如何对handlerbar文件进行Ajax或jquery调用

Question

<div class="ui form segment">
<div class="field">
<div class="ui selection dropdown" tabindex="0">
<div class="default text">
Select
</div>
<i class="dropdown icon"></i><input name="hidden-field" type="hidden">
<div class="menu" tabindex="-1">
<div class="item" data-value="1">
Choice 1
</div>
<div class="item" data-value="2">
Choice 2
</div>
</div>
</div>
</div>
</div>

这段代码是在一个template.hbs(handlbar(文件中编写的。我想用以下命令初始化下拉菜单

$('.ui.dropdown')
.dropdown();

我在哪里可以写第二个代码？如果它是一个html/php文件，我可以在模板中编写

Answer 1

简短的回答，你不会。

长话短说：如果您是一个为自己的工作感到自豪的开发人员，并且不希望下一个维护人员幻想将您淹没在肮脏的厕所水中，那么您应该创建一个下拉组件。这个组件的范围似乎很小，看起来像这样：

{{dropdown-list options=listOfOptions onOptionSelect=(action "someAction")}}

您传入选项，转换：

<div class="menu" tabindex="-1">
<div class="item" data-value="1">
Choice 1
</div>
<div class="item" data-value="2">
Choice 2
</div>
</div>

至：

<div class="menu" tabindex="-1">
#{{each options as |option|}}
<div class="item" data-value="{{option.value}}">
option.displayName
</div>
{{/each}}
</div>

其中每个选项是[{displayName: "Option 1", value: 1}...]

在组件的javascript部分中，只需从didInsertElement中执行上面的代码，文档描述为：

组件成功地将其支持的HTML元素呈现到DOM中后，它将触发其didInsertElement((钩子。

最后，在组件内部，将侦听器绑定到下拉菜单本机事件。一个这样的函数，用于下拉菜单的选择操作的函数，应该调用this.onOptionSelect(whateverTheSelectedValueIs)。这允许您为每个下拉列表定义不同的操作。

我强烈建议你花点时间阅读文档的这一部分

编写Ember需要与编写后端呈现的html+jquery风格的应用程序不同的心态。您希望尽可能地将javascript代码与DOM解耦，并将重点放在值+数据向下/操作向上。组件是绑定到本地javascript事件并与第三方插件集成的正确位置。这样做可以有效地隔离DOM交互，并为应用程序的其他部分提供更好的api。如果你只使用路由renderTemplate钩子来执行.dropdown()调用，你需要每个开发人员记住，在你想使用下拉列表的任何时候都要调用下拉列表，并且在可重用性方面完全没有做任何事情，只是通过破解的方式找到了解决方案。不要做那个人，要做对：(