在页面转换后调用jQuery事件 [英] Calling a jquery event after the page transitions

问题描述

例如，从 / application 转换到 / application / faq ， $ '.object'）。show（）; 在加载/应用程序时关闭，但是当我转换到 application / faq ！

For instance, transitioning from /application to /application/faq, $('.object').show(); is set off when /application loaded, but it doesn't go off again when I transition to application/faq!

也许这只是 didInsertElement 的工作原理，但是我需要每次都会调用一些东西我转换到任何具有dom类的对象的对象。

Maybe that's just how didInsertElement works, but I need something that will be called after every time I transition to anywhere with a dom element that has the class `object.

对于这个例子，类'object'是我要切换的。

For this example, class 'object' is what I want to toggle.

'application_view' on didInsertElement {
   $('.object').show();
}

-'application.hbs' HTML snippet-
<div class="object"></div>

-'faq.hbs' HTML snippet-
<div class="object"></div>

all css
  .object {
   display:none
  }

这是一个棘手的部分：我想要 $（'。object'）。show（）; 从$ _ c中的application_view激活$ c> application.hbs 和 faq.hbs 。

Here's the tricky part: I want $('.object').show(); to be activated from application_view in both application.hbs and faq.hbs.

推荐答案

这是一个使用jQuery显示/隐藏警报的示例，因为发生了不同的转换。点击运行代码片段来查看示例。点击 A ， B 和 C 链接转换到这些路由并查看jquery动画。

Here's an example that uses jQuery to show/hide an alert as different transitions occur. Click on "Run code snippet" to see the example. Click on the A, B, and C links to transition to those routes and see the jquery animation.

var App = Ember.Application.create();

App.Router.map(function() {
  this.resource('a');
  this.resource('b');
  this.resource('c');
});

App.ApplicationRoute = Ember.Route.extend({
  actions: {
    willTransition: function() {
      Ember.$('.alert').fadeOut(200);
    },
    didTransition: function() {
      Ember.$('.alert').fadeIn(200);
    }
  }
});

.active {
  border: 2px #888 solid !important;
  padding: 2px 2px 3px 2px;
}
#main {
  margin: 1em;
}
.alert {
  margin-top: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<script type="text/x-handlebars" id="application">
  <div id="main">
    {{#link-to 'a'}}<span class="label label-default">A</span>{{/link-to}} {{#link-to 'b'}}<span class="label label-default">B</span>{{/link-to}} {{#link-to 'c'}}<span class="label label-default">C</span>{{/link-to}} {{outlet}}
    <div class="alert alert-success">Success!</div>
  </div>
</script>

这篇关于在页面转换后调用jQuery事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！