javascript - Ember JS 仅在单击的元素上启用下拉菜单

Question

我是 Ember 新手，无法理解如何在通过我的 Ember 模型上的记录填充的特定元素上运行事件。

这是我的模板

{{#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}}

现在我想在单击按钮时在每个元素上显示一个下拉列表。

当我设置enableTrade操作时，所有div的所有下拉菜单都会显示。

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

如何仅启用创建的特定 div 中的下拉菜单。

我想我需要将某些属性绑定(bind)到每个 div，但是如何访问在我的 Controller 中单击的 div？

如有任何帮助，我们将不胜感激。谢谢

Answer 1

您可以通过操作助手传递参数，并使用它们在适当的项目上设置isSelected。

{{#each model as |user| }}
  {{#each user.activeCredits as |activeCredit|}}
     <button {{action 'enableTrade' activeCredit}}>Enable Trade</button>

     {{#if activeCredit.isSelected}}
       <div class="hivetrade">Hello World</div>
     {{/if}}

  {{/each}}
{{/each}}

处理它:

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

如果您一次只需要选择一个积分，则可以像这样修改您的 Controller 和操作:

selectedCredit: null,
actions:{
  enableTrade:function(credit) {

    // unselect the previously selected credit
    if (this.get('selectedCredit')) {
      this.set('selectedCredit.isSelected', false);
    }

    // select, and cache the selection choice
    credit.set('isSelected',true);
    this.set('selectedCredit', credit);
  }
}