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

Question

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

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

{{#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

您可能正在寻找的组件钩子是afterRender，它可以让您在渲染后访问 DOM。如果您将所有 div 元素加载为隐藏，然后使用 jQuery 显示它们，您应该大致了解您所追求的。

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

Answer 2

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

您还应该查看ember-concurrency，因为它使这种工作更容易。

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

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

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