Ember js - Jquery悬停效果在元素被隐藏并被ember {{/ if}}条件重新显示后停止工作 [英] Ember js - Jquery hover effects stop working after element is hidden and redisplayed by ember {{/if}} conditional

问题描述

下面是函数的功能，我希望我的jquery函数仍然工作，即使该函数的元素被隐藏并重新使用{{#if}}条件。这个停止工作。

  App.RecordCategoriesView = Ember.View.extend（{
 didInsertElement：function（）{ 
 $（。isPublic）。on（'mouseover'，function（）{
 $（this）.attr（{src：images / makePublic-blue.png}）; 
 $ b $（。isPublic）。on（'mouseout'，function（）{
 $（this）.attr（{src：images / makePublic-grey.png }（$）
 $ b $（。isPrivate）。on（'mouseover'，function（）{
 $（this）.attr（{src： image / makePrivate-blue.png}）; 
}）; 
 $（。isPrivate）。on（'mouseout'，function（）{
 $（this） attr（{src：images / makePrivate-grey.png}）; 
}）; 
 Ember.run.scheduleOnce（'afterRender'，this，this._childViewsRendered）; 
} ，
 
 _childViewsRendered：function（）{
 //这里您的孩子的意见处于呈现状态
}，
}）
  

如果这些图像与isPublic切换，则视图中定义的两个图像的悬停效果将停止工作。

  {{＃ isPublic}} 
< a class =tooltipping float-right> 
< span>显示为公开< / span> 
< img class =table-img isPublic float-right{{actionmakePrivatethis bubbles = false}} src =images / makePublic-grey.png/> 
< / a> 
 {{else}} 
< a class =tooltipping float-right> 
< span>从公开隐藏< / span> 
< img class =table-img isPrivate float-right{{actionmakePublicthis bubbles = false}} src =images / makePrivate-grey.png/> 
< / a> 
 {{/ if}} 
  

有关如何解决这个问题的建议？ >

解决方案

只有在插入视图元素时，才会触发 onDidInsertElement hook（最上面的元素）。当一个if表达式被重新呈现时，它不会被触发。在你的情况下，if块中的元素从DOM中删除，并在必要时重新添加到它。因此，在重新显示之后它不起作用的原因是因为当前的DOM元素不再是您调用jQuery函数的DOM元素。

有几种解决方法，但我会做的是让 didInsertElement 函数观察 isPublic 属性。另外，请确保使用 Em.run.later 确保DOM元素实际存在并且在函数运行时准备就绪。我在代码库中使用下面的代码：

  jqueryEvents：function（）{
 Em.run.later （）{
 this。$（'。isPublic'）。on（'mouseover'，function（）{...}）; 
} .bind（this））; 
} .on（'didInsertElement'）。观察（'isPublic'）
  

I want my jquery function to still work even after the element with the function is hidden and reshown using {{#if}} conditionals.

Below is the function that ceases to work.

App.RecordCategoriesView = Ember.View.extend({
   didInsertElement: function() {
    $(".isPublic").on( 'mouseover', function(){
      $(this).attr({src: "images/makePublic-blue.png"});
    });
    $(".isPublic").on( 'mouseout',function(){
      $(this).attr({src: "images/makePublic-grey.png"});
    });

    $(".isPrivate").on( 'mouseover', function(){
      $(this).attr({src: "images/makePrivate-blue.png"});
    });
    $(".isPrivate").on( 'mouseout', function(){
      $(this).attr({src: "images/makePrivate-grey.png"});
    });
      Ember.run.scheduleOnce('afterRender', this, this._childViewsRendered);
    }, 

  _childViewsRendered: function() {
    // here your child views is in the rendered state
  },
})

If these images are toggled with isPublic, the hover effects of two images defined in the views ceases to work.

    {{#if isPublic}}
    <a class="tooltipping float-right">
      <span>Shown to Public</span>
      <img class="table-img isPublic float-right" {{action "makePrivate" this bubbles=false}} src="images/makePublic-grey.png" />
    </a>
    {{else}}
      <a class="tooltipping float-right">
        <span>Hidden from Public</span>
        <img class="table-img isPrivate float-right" {{action "makePublic" this bubbles=false}} src="images/makePrivate-grey.png" />
      </a>
    {{/if}}

Any suggestions on how to remedy this?

解决方案

The onDidInsertElement hook only fires when the view element is inserted (the topmost element). When an if expression is re-rendered, it's not fired. And in your case, the elements in the if block are deleted from the DOM and re-added to it when necessary. So the reason it's not working after being re-displayed is because the current DOM element is no longer the DOM element that you called the jQuery function on.

There's several workarounds, but what I would do is have the didInsertElement function observe the isPublic property. Also, make sure to use Em.run.later to ensure the DOM elements actually exist and are ready when the function runs. I use the code below in my codebase:

jqueryEvents: function() {
    Em.run.later(function() {
        this.$('.isPublic').on('mouseover', function() { ... });
    }.bind(this));
}.on('didInsertElement').observes('isPublic')

这篇关于Ember js - Jquery悬停效果在元素被隐藏并被ember {{/ if}}条件重新显示后停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！