如何在ember js中插入元素后获得通知

我的问题如下:
*************************************** 场景 *********************************
我有一个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>

根据十一月，当checkVariable为true时，#itemToBeInserted插入到dom中，当checkVariable为false时，#itemToBeInserted从dom中移除。
我想添加按键事件处理程序到#itemToBeInserted，也做$('#itemToBeInserted').trigger('focus')当checkVariable为真，即设置当#itemToBeInserted插入到DOM。
*************************************** 问题 *********************************
为了做$('#itemToBeInserted').on('keypress'，function(){})和$('#itemToBeInserted').trigger('focus');#itemToBeInserted必须在dom中。假设我们可以执行$("#wrapper").on('keypress'，'#itemToBeInserted'， function…);$('#itemToBeInserted').trigger('focus');#itemToBeInserted必须在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(重点);这两个不会工作，因为#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到模板。哈佛商学院，而不是其他方式在十一月