Ember JS- 在组件完全渲染后应用 jQuery

Question

我是 ember 的初学者，我正在尝试实现一个 jQuery 块以延迟 0.5 秒一个接一个地显示我的对象。

我当前显示 ember 对象的代码如下所示

{{#if isBusy}}
  <div>Loading..</div>
{{else}}
  {{#if areLeads}}
    {{#each lead in leads}}
      <div>lead.title</div>
    {{/each}}
  {{else}}
    <div>No Leads</div>
  {{/unless}}
{{/if}}

现在，我真正想要的是在潜在客户准备好显示之后，我的代码应该执行，就像 isBusy 为 false 时一样。

以下是我试过的

_animateLeads: ->
    alert()

didInsertElement: ->
   Ember.run.scheduleOnce 'afterRender', @, => @_animateLeads()

但是，一旦页面开始加载，就会弹出警报。我不太了解 ember 概念并学习相同的内容。

请指导我如何进行，并让我知道是否需要提供其他详细信息。任何帮助表示赞赏。谢谢

更新

我最终得到了以下代码

 _animateLeads: Ember.observer 'leads', ->
     if @get('leads')
         $('li.leads-list-lead').each (i) ->
           $(this).fadeOut(1000).delay(2000*i).fadeIn(2000);
           return

 _animateOnInsert: (->
   Ember.run.scheduleOnce('afterRender', @, @_animateLeads)
 ).on('didInsertElement')

但以下内容仅在对 leads 进行更改时有效。最初，当加载页面时，潜在客户不会按预期出现，即。以动画的方式。以下也适用，但同样，仅当 leads 更改时

_animateLeads: (->
    if @get('leads')
      $('li.leads-list-lead').each (i) ->
        $(this).fadeOut(1000).delay(2000*i).fadeIn(2000);
).observes('leads')

解决方案

我通过混合上面对我有用的代码得到了以下代码。

  _animateLeads: (->
    Ember.run.scheduleOnce('afterRender', @, @_animateActiveLeads)
  ).observes('leads')

  _animateActiveLeads: (->
   if @get('leads') && @get('leadDisplay') == 'active'
     $('li.is-online').each (i) ->
       $(this).fadeOut(0).delay(1000*i).fadeIn(1850);
  )

有人问了一个类似的问题 here，但我之前的搜索中没有出现。接受的答案对我有用。

Answer 1

你要看的是Promise()。这是一个异步调用。这并不意味着在你的元素被插入之后它就准备好了。可能需要0.5s、1s、5s...

你也应该看看 ember-concurrency 因为它使这种工作更容易。

话虽如此，您应该这样做：

leads: this.get('store').findAll('leads').then(function(leads) {
   //loaded
})

此外，如果您正在寻找动画，请查看 liquid-fire

Answer 2

您可能正在寻找的组件挂钩是 afterRender，它可以让您在呈现后访问 DOM。如果您将所有 div 元素加载为隐藏，然后使用 jQuery 显示它们，您应该大致得到您想要的。

目前 liquid-fire（Ember 中动画的首选插件）对动画列表没有帮助。有一个未来的底层库被设计为运行 below liquid-fire (https://github.com/ember-animation/ember-animated) 支持它，但它甚至还不是 alpha。如果您刚刚开始使用 Ember，最好暂时避开它......

Ember JS- 在组件完全渲染后应用 jQuery

Ember JS- Apply jQuery after a component is entirely rendered

jquery

ember.js