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

我是一名ember初学者，试图实现一个jQuery块来以0.5秒的延迟一个接一个地显示我的对象。Ember JS-在组件完全呈现后应用jQuery

我当前的代码，以显示我的灰烬对象是一样的东西下面

{{#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没来在我前面的搜索。接受的答案为我工作。

来源

2017-10-14 Aakanksha

你可能寻找的组件钩afterRender，这将会让你在DOM渲染后访问DOM。如果你将所有的div元素加载为隐藏的，然后使用jQuery来显示它们，你应该大致得到你以后的样子。

目前liquid-fire（Ember中的动画插件）对动画列表没有帮助。有一个未来的底层库设计用于支持它的液体火灾（https://github.com/ember-animation/ember-animated）下，但它甚至不是alpha。如果你刚刚开始使用Ember，现在最好避开它...

来源

2017-10-15 14:01:26 acorncom

对于'afterRender'你是对的，正如你看到的是最初尝试的那样。但是，我改变了一些东西，并且能够使它工作。虽然面临另一个问题。我会在一段时间后发布我的代码 – Aakanksha

你可以看看更新的代码和说明吗？谢谢 – Aakanksha

我后来认为'byRender'，你的意思是像'_animateLeads'这样的方法。无论如何，我发现结束了上述解决方案，适合我。感谢您的指导。欣赏它！ – Aakanksha

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

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

虽这么说，你应该做这样的事情：

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

此外，如果你正在寻找的动画看看到liquid-fire

来源

2017-10-15 12:19:02 mk2

我相信问题是如何在数据加载后在元素列表中进行动画... – acorncom

I恐怕我不理解你。然而，@acorncom对于动画是正确的。 – Aakanksha

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

回答

相关问题