javascript - 页面转换后调用 jquery 事件

Question

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

也许这就是 didInsertElement 的工作原理，但我需要在每次转换到具有类“object”的 dom 元素的任何位置时调用的东西。

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

'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 和 中的 application_view 激活 $('.object').show();常见问题解答.hbs.

Answer 1

下面是一个使用 jQuery 在发生不同转换时显示/隐藏警报的示例。单击“运行代码片段”查看示例。单击 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>