javascript - 多次使用一个组件时如何一次触发或检测所有组件 - Ember

Question

我创建了一个自定义组件，允许用户键入并从下拉列表中进行选择。 下拉菜单是一个动态 div。 我已设法在单击下拉列表外部时关闭所有打开的下拉列表。但是，如果我单击一个组件下拉列表，而另一个组件(如果下拉列表打开)则不会关闭。 我尝试制作一个通用模型/变量，并仅在单击时启用它，但它不起作用。 以下是我的 HBS 和 JS 文件

自定义下拉.hbs

<div class="custom-dropdown">
<div class="cus-drop-text">
    {{input type=type value=inputValue   id=dropdownTF class="editableDDText" }}
</div>
<div class="cus-drop-img" {{action 'showList'}}>
    <div class="overlapDiv" >
    </div>
    <select id={{dropdownDD}}  class="pull-left editableDDSelect">
    {{#if hidealways}}
        <option value="" hidden></option>
    {{/if}}
    </select>
</div>
{{#if showList}}        
<div class="cus-drop-list {{isShowing}}" id="cus-drop-list">
    {{#each optionlist as |option|}}
    {{#if (eq selectedValue option)}}
        <span class='active cus-drop-list-item'  {{action 'onOptionChange' option}} data-value={{option}}>{{option}}</span>
        {{else}}
        <span class='cus-drop-list-item'  {{action 'onOptionChange' option}} data-value={{option}}>{{option}}</span>
    {{/if}}
    {{/each}}
</div>
{{/if}}

custom-dropdown.js

import Ember from 'ember';
export default Ember.Component.extend({
 inputName:"",
 dropdownDD: "",
 dropdownTF: "",
classNameBindings: ['isShowing'],
isShowing: 'visible',
showList:false,
hidealways:false,
isActive:false,
selectedValue: "",
inputValue:"",
didInsertElement() {
    var self=this;
    var clickFunction = function (event) {
        var target = Ember.$(event.target);
        if(target.context.className !== "overlapDiv"){
            if(!self.isDestroyed){
            self.set('showList',false);
            }
        }
    };
    window.addEventListener("click", clickFunction, false);
},

didReceiveAttrs() {
    this.set('inputName',this.get('inputID'));
    this.set('dropdownName',this.get('dropdownID'));
    this.set('dropdownTF',this.get('inputName')+"TF");
    this.set('dropdownDD',this.get('dropdownName')+"DD");       
    this.set('inputValue',this.get('value'));
},
keyPress(event){        
    this.validateInput(event);
},    

validateInput(event) {
    switch(this.get('allowedText')){
        case "numOnly":
            // Allow: backspace, delete, tab, escape, enter and numbers
            if (Ember.$.inArray(event.keyCode, [8, 9, 13, 27, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57]) !== -1 ||
            // Allow: Ctrl+A, Command+A
            (event.keyCode === 65 && (event.ctrlKey === true || event.metaKey === true))) {
            // let it happen, don't do anything     
                if(Ember.$("#"+this.elementId+"TF").val().length  < this.get('allowedCharLen')+1){
                return;
                }
                else{   
                event.preventDefault();
                }
            }
            else{   
                event.preventDefault();
            }
        break;

    }
},   
actions:{
    focusOutFire:function(){
        var self =this;
        self.set('showList',false); 
    },
    onOptionChange:function(selectedValue){ 
        var self = this;
        self.set('selectedValue',selectedValue);
        self.set('showList',false); 
        self.set('inputValue',"");
        self.set('inputValue',selectedValue);
    },
    showList:function(){
        var self =this;         
        var showDropdown = true;
        // To check if the dropdown is enabled or disabled
        if(Ember.$("#"+this.get('dropdownID')+"DD").is(":disabled")){
            showDropdown = false;
        }
        else{
            showDropdown = true;
        }

        if(showDropdown){
            if(self.get('showList')){
                // Disabled Dropdown so don't show the list on click
                self.set('showList',false); 
            }
            else{
                // Dropdown is enabled                  
                self.set('showList',true);  
            }
        }
    }
}

});

检查附加图像。我想在单击另一个下拉列表时关闭已打开的下拉列表。还建议改进我在此组件中的 ember 编码的最佳实践。谢谢您的帮助

Answer 1

不使用窗口事件，而是使用 ember 组件的事件机制:From guide .

使用 focusOut 和 focusIn 等处理程序。