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中的下拉列表。

我想我需要将某些属性绑定到每个div，但是如何访问我的控制器中单击了哪个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);
  }
}

如果您一次只允许选择一个积分，您的控制器和操作可以像这样修改：

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);
  }
}

Ember JS仅对单击的元素启用下拉列表

1 个答案: