如何在ember js中将元素插入dom后获取通知

Question

我的问题如下：
******************************************场景**** ***********************************
我有一个带有布尔变量的 ember 组件。当这个布尔变量为真时，其对应模板中的条件得到满足，其内容被插入到 DOM 中。

exports default Ember.component.extend({
checkVariable:false,
setCheckVariable:function()
{
this.set('checkVariable',true);
}
});

<div id="wrapper">
{{#if checkVariable:false}}
<div id="itemToBeInserted">
<span>
</span>
</div
{{/if}}
</div>

根据 ember，只要 checkVariable 为真，#itemToBeInserted 就会插入到 dom 中，而当 checkVariable 为假时，#itemToBeInserted 就会从 dom 中删除。
我想将 keypress 事件处理程序添加到 #itemToBeInserted 并在 checkVariable 为真时执行 $('#itemToBeInserted').trigger('focus') ，即在 #itemToBeInserted 插入 DOM 时设置。
************************************************问题**** ***********************************
为了做到 $('#itemToBeInserted').on('keypress',function(){}) 和 $('#itemToBeInserted').trigger('focus'); #it​​emToBeInserted 必须在 dom 中。假设我们可以这样做 $("#wrapper").on('keypress','#itemToBeInserted',func...);但要做 $('#itemToBeInserted').trigger('focus'); #it​​emToBeInserted 必须在 dom 中。 现在在 setCheckVariable 中假设我想要执行以下操作：

setCheckVariable:function()
    {
    this.set('checkVariable',true);
$('#itemToBeInserted').on('keypress',function(){}); 
$('#itemToBeInserted').trigger('focus');
    }

现在，即使我将 checkVariable 设置为 true，将 #itemToBeInserted 插入到 dom 也需要一些时间，但接下来的两个语句会被执行，即 $('#itemToBeInserted').on('keypress',function(){}); $('#itemToBeInserted').trigger('focus');这两个不起作用，因为#itemToBeInserted 不在dom中！！！！！！我想知道如何知道在插入类似 didInsertElement 之类的东西之后何时将特定部分插入到 dom 中，但是对于 if 条件！！！！基本上我想知道在将元素插入 dom 后如何执行一些指令，因为我们可以安排它或调用回调吗？
************************************************方法试过*** ******************************
1>此方法有效，但我不想使用 setTimeout。

setCheckVariable:function()
        {
        this.set('checkVariable',true);
         var _this = this;
            setTimeout(function(){_this.itemLoaded();},100);

        }
itemLoaded:function()
{
if(!document.getElementById('itemToBeInserted'))
        {
var _this = this;
            setTimeout(function(){_this.itemLoaded();},100);
return false;
        }
  $('#itemToBeInserted').on('keypress',function(){}); 
    $('#itemToBeInserted').trigger('focus');

}

2>我以以下不同的方式使用了绑定，但这里的问题是第一次加载应用程序时会调用绑定的计算机属性，但是在加载应用程序后绑定的计算属性不会被调用，它充当变量被缓存

<div id="wrapper">
    {{#if checkVariable:false}}
    <div id="itemToBeInserted">
{{if loaded}}
{{/if}}
    <span>
    </span>
    </div
    {{/if}}
    </div>
setCheckVariable:function()//this function is called after clicking a button, so first time application is loaded and we click the button loaded computer property gets called after that it does not get called
            {
            this.set('checkVariable',true);                  
            }
loaded:function()
{
console.log('this gets hit only once when application is loaded and not after that');
}.property()

或

<div id="wrapper">
    {{#if checkVariable:false}}
    <div id="itemToBeInserted" {{bind-attr class = "loaded:loaded"}}>
    <span>
    </span>
    </div
    {{/if}}
    </div>
setCheckVariable:function()//this function is called after clicking a button, so first time application is loaded and we click the button loaded computer property gets called after that it does not get called
            {
            this.set('checkVariable',true);                  
            }
loaded:function()
{
console.log('this gets hit only once when application is loaded and not after that');
}.property()

或

<div id="wrapper">
    {{#if checkVariable:false}}
    <div id="itemToBeInserted">
<img src="" id="checkLoad" style="display:none;"/>
    <span>
    </span>
    </div
    {{/if}}
    </div>
setCheckVariable:function()//this function is called after clicking a button, so first time application is loaded and we click the button loaded computer property gets called after that it does not get called
            {
this.$().on('load',checkLoad,this.loaded); //unfortunately loaded is one of those events that does not load
            this.set('checkVariable',true);                  
            }
loaded:function()
{
console.log('this gets hit only once when application is loaded and not after that');
}.property()

3>

<div id="wrapper">
    {{#if checkVariable:false}}
    <div id="itemToBeInserted">
{{if loaded}}
{{/if}}
    <span>
    </span>
    </div
    {{/if}}
    </div>
setCheckVariable:function()//this function is called after clicking a button, so first time application is loaded and we click the button loaded computer property gets called after that it does not get called
            {
            this.set('checkVariable',true);                  
            }
loaded:function()
{
console.log('this gets hit only once when application is loaded and not after that');
}.property('checkVariable') //now loaded gets called but not when #itemToBeInserted is insertedIntoDom but when checkVariable changes again useless

我还尝试为#itemToBeInserted 创建另一个组件 但显然我们不能将一个组件附加到另一个组件中，因为它们 是子视图。我也尝试过使用 Ember.handlerbars.compile() 但是 运气好，又出问题了。

在我看来，更改似乎只反映从 component.js 到 template.hbs 的一种方式，而不是 ember 中的另一种方式。

Answer 1

问题已解决
经过多次脑筋急转弯想出了这个解决方案。

    setCheckVariable:function()
                {
var _this = this;    
    Ember.run(function()            //called in the format saard
                {
                    Ember.run.schedule('afterRender',function(){    //this gets executed later          
                        if(_this.get('checkVariable'))
                        {                       
                            var $item= $(document.getElementById('itemTobeInserted'));

                            $item.on('keydown', function(evt){_this.handleKeyPress(evt);});

                            $item.trigger('focus');
                        }                                           
                    });
                    Ember.run.schedule('sync',function(){       //this gets executed first
                        _this.set('checkVariable',true);   
                    });

                });            
                }

即使我的问题解决了，但我仍然想知道如何让 computer.property 始终被调用，而不是在应用程序加载时调用一次