3

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

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

我不知道在 Ember 中有任何方法可以轻松地做到这一点，因为标准的 JQuery$(document).ready()不适用于 Ember 应用程序。必须有一些简单的方法来做到这一点，但这个问题的所有其他答案似乎都是复杂的解决方法，并且基于 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>
4

2 回答 2

5

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

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

这种溶液的成分是什么？

  1. didInsertElementView 是放置 jQuery 和 jQuery 插件初始化逻辑的正确位置。
  2. didInsertElement当您的视图的 DOM-Element 已插入，但内部元素尚未插入时，将调用该钩子。因此，我将您的逻辑包装在对Ember.run.next(). 此调用确保在您的视图完全呈现后运行逻辑，因为它在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的第一个解决方案的问题：

有什么方法可以减少元素呈现和 JQuery 运行之间的延迟，或者这根本不可能？当模板渲染后元素实时更改时，这看起来很有趣。

根据托马斯的说法：

我已经使用next和schedule在我自己的应用程序中运行 jquery 并且 Brad 提到的延迟在 schedule 中明显减少甚至不存在

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

于 2013-04-03T17:23:48.973 回答
0

我的假设：

  • 该代码是您的 HTML 页面中唯一的内容（连同您的 JavaScript 包括在内）。

  • 这是您的 JavaScript 文件中的唯一代码：

    应用程序 = Ember.Application.create();

如果这两个假设是正确的，那么您不是在使用索引模板，您实际上是在使用应用程序模板。每个视图都有一个初始化函数。您要做的最简单的事情是像这样覆盖该函数：

App.ApplicationView = Ember.View.extend({
    init: function(){
        this._super();
        alert('do something here');
    }
});

这是一个 Fiddle 供您查看。

于 2013-04-03T17:23:24.817 回答