页面转换后调用 jquery 事件

Question

例如，从/application 转换到/application/faq，$('.object').show(); 在/application 加载时被触发，但是当我转换到application/faq 时它不会再次触发！

也许这就是didInsertElement 的工作原理，但我需要在每次转换到具有类`object 的dom 元素的任何地方后都会调用的东西。

对于这个例子，类“对象”是我想要切换的。

'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
  }

这是棘手的部分：我希望在 application.hbs 和 faq.hbs 中都从 application_view 激活 $('.object').show();。

Answer 1

这是一个使用 jQuery 在发生不同转换时显示/隐藏警报的示例。单击“运行代码 sn-p”以查看示例。单击 A、B 和 C 链接以转换到这些路线并查看 jquery 动画。

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>