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

我正在编写一个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>

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

{{outlet}}

我的假设：

• 该代码是HTML页面中唯一的内容（包括JavaScript）
• 这是JavaScript文件中唯一的代码：
  App=Ember.Application.create（）

如果这两个假设是正确的，那么您不是在使用索引模板，而是在使用应用程序模板。每个视图都有一个init函数。您要做的最简单的事情就是重写该函数，如下所示：

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

---

.

当您谈到“索引模板”时，我假定您指的是应用程序视图的模板：

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

此溶液的成分是什么？

视图的

didInsertElement

是放置jQuery和jQuery插件初始化逻辑的正确位置

当视图的DOM元素被插入时，

didInsertElement

钩子被调用，但是内部元素还没有被插入。因此，我将您的逻辑包装在对

Ember.run.next（）

的调用中。此调用确保在视图完全呈现后运行逻辑，因为它在余烬运行循环的末尾运行，余烬运行循环负责同步对DOM的必要更改

更新：Thomas提出了更好的解决方案，以减少渲染和正在运行的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>

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

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

---

有没有办法减少元素渲染之间的延迟 当JQuery运行时，或者这根本不可能？看起来 当元素在模板渲染后实时更改时，这很有趣

托马斯说：

我在自己的应用程序和 Brad提到的延迟明显小于或不存在 时间表

对于那些对Ember Run循环的伟大概念感兴趣的人，请进一步阅读：

---

这将不起作用，因为在创建Ember对象时会调用init函数。这是在它被呈现到DOM之前很久的事情。而且fiddle甚至没有渲染，因为您没有在init方法中调用它。\u super，这样您就缺少了重要的初始化内容。这可能不是最好的选择，但fiddle确实在渲染。如果不是的话，我就不会发了。在过去的一个月左右，我注意到Chrome拒绝“运行”包含Github托管代码引用的fiddle。这是因为Github以text/plain的形式返回JS文件。无论如何，我必须使用Firefox来编写小提琴，而且它确实执行了。我没有在结果视图中看到Chrome和Firefox中的navbar div。我可以通过给super添加上面提到的调用来修复。我明白你的意思。同意。我已经更新了fiddle和我的答案。有没有办法减少元素呈现和JQuery运行之间的延迟，或者说根本不可能？当元素在模板渲染后实时更改时看起来很有趣。嗯，这意味着在视图渲染后立即运行它。但是RunLoop确实渲染了它的“渲染管道”中的所有内容，并且运行了next中的部分。长话短说，我不知道如何做到这一点，但我想如果深入运行循环是可能的。但我想这类问题通常可以通过显示加载屏幕或类似的方式解决，直到UI完全加载。你可以尝试

Ember.run.schedule（'afterRender'，function（）{}）

我已经使用了

next

和

schedule

在我自己的应用程序中运行jquery，Brad提到的延迟明显小于

schedule