Поэтому в моем коде у меня есть простой faq, который выглядит ниже.
<section class="faq-section">
<label class="question">Q:This is a Questions?</label>
<p class="answer">This is a an answer </p>
</section>
<section class="faq-section">
<label class="question">Q:This is a Questions?</label>
<p class="answer">This is an answer</p>
</section>
Я хочу, чтобы пользователь мог нажать на вопрос и показать ответ. В обычном jQuery я бы сделал что-то вроде этого:
$( ".question" ).click().next( ".answer" ).toggle('slow');
Как бы я сделал что-то подобное, используя маршрут и действие
<section class="faq-section">
<label class="question" {{action openQuestion}}>Q:This is a Questions?</label>
<p class="answer">This is an answer</p>
</section>
Ember обычно хочет, чтобы вы избегали взаимодействия с DOM напрямую, поэтому я не думаю, что там была встроена поддержка такого типа использования. Но у меня есть аналогичный вариант использования, и я делаю что-то вроде этого:
<section class="faq-section">
<label class="question" {{action 'openQuestion' questionId}}>blah</label>
<p class="answer" {{bind-attr data-question-id=questionId}}>blah</p>
</section>
Затем в вашем контроллере:
actions: {
openQuestion: function(questionId) {
this.$('.answer[data-question-id=' + questionId + ']').toggle('slow');
}
}
Это предполагает, что вы можете придумать уникальный questionId
для каждого вопроса, но это не должно быть слишком сложно.