samedi 27 juin 2015

Ember JS Enable dropdown only on element which was clicked

I am an Ember newbie and can't get my head around how to run events on specific elements populated via records on my ember model.

Here is my Template

{{#each user in model }}
  {{#each activecredit in user.activecredits}}
    <div class="col-lg-2 hive-credit-box active-credit">
        <div class="credit-brandname">
            {{activecredit.Brandname}}
        </div>
        <div class="credit-brand-image-container">

            <img src="http://localhost:3000/{{activecredit.Imglocation}}" class="credit-image"/>
        </div>

        <div class="hive-credit-percent"><img class="hive-filled-container" src="imgs/hivefilled9.png"/></div>
        <div class="hive-credit-dollars">$xx.xx</div>
        <div  {{bind-attr class=activecredit.Brandname}} {{action 'enableTrade'}}><img src="imgs/trade_button.png" class="credit-trade-button"  /></div>
        <div class="credit-brand-amount">
            xx%
        </div>

        <!-- Trade button click dropdown -->
       {{#if isSelected}}

        <div class="hivetrade">
            <div class="arrow_box">
                Hi there
            </div>
            <div class=""></div>
        </div>
        {{/if}}

    </div>
   {{/each}}
  {{/each}}

Now I want to show a drop down on each element on click of a button .

When I set the enableTrade action , all dropdowns of all the divs show up.

actions:{
  enableTrade:function(){
      this.set('isSelected',true);
  }
}

How do I enable only the dropdown in the particular div that was created.

I suppose I need to bind certain attributes to each div,but how do I access which div was clicked in my controller?

Any help would be appreciated . Thanks




Aucun commentaire:

Enregistrer un commentaire