Ember handlebars How can I make an Ajax or jquery

问题:

<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>

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

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

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

回答1:

Short answer, you don't.

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>

to:

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

where each options is [{displayName: "Option 1", value: 1}...]

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

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

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

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 :)