重要需求：EmberJS 等同于 jQuery 的 .ready() 函数

Question

好的。所以我将其标记为重要需求的原因是因为我过去曾写过另一个类似的问题，当我被要求给出我试图完成的具体事情时，我给出了，整个事情变成了关于那，什么都没有解决。

现在我喜欢上了我想要完成的 5 件不同的事情，这些事情我本来可以用 jQuery 和 .ready() 完成的，并且在半小时内完成了所有功能。我花了 3 天时间搜索 Google，阅读官方 Ember 2.13.0 文档等无济于事。

这必须存在，因为我只是拒绝相信我不能在路线上放置一个总是运行的事件侦听器，无论转换到子路线或点击东西或它的事实已经渲染并且不会渲染两次。我唯一能够开始工作的是组件上的 didRender。没有别的工作。

我在路线上尝试了 willTransition。不起作用。我在路线上试过 didTransition 。不起作用。我搜索 Google 只是为了在这里找到 Ember 1x.

的答案

我只想拥有这样的东西：

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

那将：

进入路线后工作
当用户点击子路由时仍然继续运行*
永远不会停止工作，除非用户完全退出实际的父路由并转到其他地方
运行一直

组件上的 didInsertElement 所做的是，当它在打开路线 (android/setup) 上时......它实际上会工作..直到我点击不同的选项卡转到不同的子路线。然后它停止工作，回到它开始的原始子路由，它仍然不工作。

我不知道是不是因为组件没有再次渲染还是什么原因，但是为什么它停止工作并且事件侦听器死亡超出了我的范围。

我在这里找到了人们说使用 didInsertElement 的其他答案。它对我不起作用，因为事件侦听器在与页面交互后死亡。我需要在选择一条完全不同的根路径之前不会停止收听的东西。

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

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

注：
1. 记住，didTransition hook 应该定义在actions hash
2.It 应该 return true 只有这样它才会传播到父路由。
3.Just 确保所有子路由 return true 如果你写了 didTransition 钩子。

路由转换后，任何html内容可用都会触发change事件。但这不适用于过渡后创建的 DOM，例如基于 if 块的 hiding/showing 组件可能无法注册 change 事件。对于那些你需要使用 didInsertElement 和 this.$('input,select').on('change', function(){}) 和 willDestroyElement 挂钩销毁处理程序 this.$('input,select').off('change')

重要需求：EmberJS 等同于 jQuery 的 .ready() 函数

VITAL NEED: EmberJS equivalent of jQuery's .ready() function that STAYS ON

jquery

events

event-handling

ember.js