VITAL NEED:EmberJS相当于jQuery的.ready()函数,它停留在

时间:2017-06-28 19:17:16

标签: jquery events ember.js event-handling

确定。所以我之所以将其标记为一个至关重要的需求,是因为我过去曾写过这样的另一个问题,当我被要求提供一个我想要完成的具体事情时,我就给出了,整个事情就变成了那没什么好解决的。

现在我已经开始喜欢我想要完成的5个不同的事情,我可以用jQuery和.ready()来完成并且在半小时内完成所有功能。我花了3天时间搜索谷歌,阅读官方的Ember 2.13.0文档等等都无济于事。

这个存在,因为我只是拒绝相信我不能放置一个总是会在路由上运行的事件监听器,无论是转换到子路由还是点击事物或它已经呈现的事实而不是渲染两次。我能够开始工作的唯一一个是didRender组件。没有别的办法。

我在路线上试过了willTransition。不行。我在路线上尝试过didTransition。不行。我只搜索了谷歌,在这里为Ember 1x提出答案。

我想做的就是这样:

Ember.$('input,select,textarea').on('change',function() {
    do stuff here
}

那将:

  • 输入路线时的工作
  • 当用户点击子路线*
  • 时仍然可以继续运行
  • 除非用户完全退出实际的父路线并转到其他地方,否则不会停止工作
  • 一直运行

组件上的didInsertElement做的是当它在开启路径(android / setup)上时..它实际上会工作..直到我点击一个不同的选项卡转到不同的子路径。然后它停止工作,并在返回原始子路线时开始,它仍然无法工作。

我不知道是不是因为组件没有再次渲染,或者为什么它停止工作以及事件监听器死亡超出了我。

我在这里找到了其他人说使用didInsertElement的答案..它对我不起作用,因为事件监听器在与页面交互后死亡。我需要一些不会停止倾听的东西,直到选择完全不同的路线为止。

如果你想知道我为什么要这样做,我可以立即给你5个理由,所以我宁愿实际的精确程序功能我要求如何解释而不是单个任务或者在功能方面的目标,因为我需要这么多时间而且不得不绕着我的屁股走到我的肘部,因为我不能只是。已经准备好并且称它为一天。

1 个答案:

答案 0 :(得分:1)

这个答案可能不适用于所有人,但如果您想解决使用案例,可以试试。

import Ember from 'ember';
export default Ember.Route.extend({
    deactivate(){
     //Here you can clear all the event handler stuff.
     Ember.$('input,select,textarea').off('change');
    },
    actions:{
        didTransition(){
            Ember.run.later('afterRender', () => {
              //this will ensure that inside this route all html element is ready,
              //Now you can whatever stuff is required to deal with html element.
              //like registering event handler. 
              Ember.$('input,select,textarea').on('change',function() {
                //  do stuff here
                }); 
            }, 500);
            return true;
        }
    }
});

注意:
记住,didTransition钩子应该在动作哈希中定义 2.它应return true,然后它才会传播到父路线 3.如果你已经写了didTransition钩子的话,那么确保所有的子路由return true

路线转换后,change事件将触发任何可用的html内容。但这不适用于在转换之后创建的DOM,例如基于if块的隐藏/显示组件可能未在change事件中注册。对于这些内容,您需要使用didInsertElementthis.$('input,select').on('change', function(){})以及willDestroyElement hook destory handler this.$('input,select').off('change')