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为假时一样。

以下是我尝试过的事情

_animateLeads: ->
    alert()

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

但是，一旦页面开始加载，警报弹出窗口就会弹出。我不太了解余烬概念并且学习相同的东西。

请指导我如何继续，如果我应该提供其他详细信息，请告诉我。任何帮助表示赞赏。谢谢

更新

我最终得到以下代码

 _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

Ember JS-在完全呈现组件后应用jQuery

2 个答案: