灰烬车把如何对车把文件进行Ajax或jquery调用？ [英] Ember handlebars How can I make an Ajax or jquery call for an handlebar file?

问题描述

<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（车把）文件内。
我想使用以下命令初始化下拉菜单

this code is written inside a template.hbs(handlebar) file. I want to initialise the drop down with the following command

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

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

where could I write the second code? if it was an html/php file I could write inside the template

推荐答案

简短的答案，您不会。

长答案：
如果您是对自己的工作感到骄傲的开发人员，并且不希望下一位维护者幻想将自己淹没在肮脏的马桶水中，应该创建一个下拉菜单组件。该组件的范围似乎很小，看起来像这样：

Long answer: If you are developer who takes any pride in his work and doesn't want the next maintainer to fantasize about drowning you in dirty toilet water, you should create a dropdown component. This component seems small in scope and would look something like this:

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

您传递选项，进行转换：

You pass in the options, convert:

<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，值： 1} ...]

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

Inside of the javascript part of the component, simply execute the above code from within didInsertElement which the docs describe:

在组件成功将其HTML元素呈现到DOM后，它将

After a component successfully renders its backing HTML element into the DOM, it will trigger its didInsertElement() hook.

最后，在组件内部，将侦听器绑定到下拉本地事件。其中一个功能（用于下拉菜单的select动作）应调用 this.onOptionSelect（whateverTheSelectedValueIs）。这样您就可以为每个下拉菜单定义不同的操作。

Lastly, inside of the component, bind listeners to the dropdowns native events. One such function, the one for the dropdown's select action, should call this.onOptionSelect(whateverTheSelectedValueIs). This allows you to define actions differently for each dropdown.

我强烈建议您花一点时间阅读此文档部分

I highly recommend you take a moment to read this section of the docs

编写Ember与编写后端呈现的html + jquery样式的应用程序所需的思维方式不同。您实际上希望尽可能地将javascript代码与DOM分离，并专注于值+数据减少/操作增加。组件是绑定到本地javascript事件并与第三方插件集成的正确位置。这样做可以有效地隔离DOM交互，并为应用程序的其余部分提供更好的api。如果仅使用路由 renderTemplate 钩子执行 .dropdown（）调用，则需要每个开发人员请记住，任何时候您都想使用下拉菜单调用下拉菜单，并且对于可重用性完全没有做任何事情，只是想办法找到解决方案。不要做那个人，做对吧：）

Writing Ember requires a different mindset than writing backend rendered html + jquery style applications. You want to really decouple your javascript code from the DOM as much as possible and focus on values + data down/actions up. Components are the correct place to bind to native javascript events and integrate with 3rd party addons. Doing so effectively isolates the DOM interactions and provides a nicer api to the rest of your application. If you were to just use the routes renderTemplate hook to execute the .dropdown() call, you require every developer to remember to call dropdown any time you want to use a dropdown and have done absolutely nothing for reusability and just hacked your way to a solution. Don't be that guy, do it right :)

这篇关于灰烬车把如何对车把文件进行Ajax或jquery调用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！