javascript - 如何在 Ember.js RC2 中的索引模板中的元素上运行一些 JS

Question

我正在编写一个 Ember.js 应用程序，我想在 View 呈现后立即在具有 navbar 类的 div 上运行以下 Javascript 代码:

$('.navbar').affix({offset: -1000});

我不知道有什么方法可以在 Ember 中轻松地做到这一点，因为标准的 JQuery $(document).ready() 不适用于 Ember 应用程序。必须有一些简单的方法来做到这一点，但是所有 other answers to this question看起来像是复杂的解决方法，并且基于过时版本的 Ember.js。

问题模板:

<script type="text/x-handlebars">
  <div class="navbar" data-spy="affix">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
      </div>
    </div>
  </div>

  {{outlet}}
</script>

Answer 1

当您谈到“索引模板”时，我假设您指的是 ApplicationView 的模板:

App.ApplicationView = Ember.View.extend({
    didInsertElement : function(){
        var that = this;
        Ember.run.next(function(){
            that.$('.navbar').affix({offset: -1000});
        });
    }
});

此溶液的成分是什么？

1. View 的 didInsertElement 是放置 jQuery 和 jQuery 插件初始化逻辑的正确位置。
2. didInsertElement Hook 在插入 View 的 DOM 元素时调用，但尚未插入内部元素。因此，我将您的逻辑包装在对 Ember.run.next() 的调用中。此调用确保逻辑在您的 View 完全呈现后运行，因为它在 Ember Run Loop 的末尾运行，后者负责同步对 DOM 的必要更改。

更新:Thomas 提出的更好的解决方案可以减少渲染和正在运行的 JS 逻辑之间的延迟:

App.ApplicationView = Ember.View.extend({
    didInsertElement : function(){
        var that = this;
        Ember.run.schedule('afterRender',function(){
            that.$('.navbar').affix({offset: -1000});
        });
    }
});

根据 OP，第一个解决方案存在问题:

is there any way to decrease the lag between when the element renders and when the JQuery is run, or is that simply not possible? It looks funny when elements change live after the template renders.

根据托马斯的说法:

I've used both next and schedule to run jquery in my own app and the delay Brad mentions is significantly less to non existent with schedule

对 Ember Run Loop 的伟大概念感兴趣的人的进一步阅读: http://alexmatchneer.com/blog/2013/01/12/everything-you-never-wanted-to-know-about-the-ember-run-loop/