CODEWITHSUNDEEP
javascriptjqueryember.js
Andrew Font
Andrew Font

Reputation: 1285

Pass jQuery $(this) via ember.js action?

So in my code i have a simple faq that looks like below.

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

I want to be able to have a user click a question and reveal an answer. In regular jQuery i would do something like this:

$( ".question" ).click().next( ".answer" ).toggle('slow');

How would i accomplish something like this using an ember route and action

<section class="faq-section">
    <label class="question" {{action openQuestion}}>Q:This is a Questions?</label>           
    <p class="answer">This is an answer</p> 
</section>

Upvotes: 0

Views: 59

Answers (1)

GJK
GJK

Reputation: 37369

Ember generally wants you to avoid interaction with the DOM directly, so I don't think there's built in support for this type of usage. But I have a similar use case, and I do something like this:

<section class="faq-section">
    <label class="question" {{action 'openQuestion' questionId}}>blah</label>
    <p class="answer" {{bind-attr data-question-id=questionId}}>blah</p>
</section>

Then, in your controller:

actions: {
    openQuestion: function(questionId) {
        this.$('.answer[data-question-id=' + questionId + ']').toggle('slow');
    }
}

This is assuming that you can come up with a unique questionId for each question, but that shouldn't be too difficult.

Upvotes: 1

Related Questions