刷新Ember中的内容时减轻闪烁的UI [英] Mitigating a flickering UI when refreshing content in Ember

问题描述

我有一个显示工作人员列表的视图。该视图具有一个按钮，它调用名为 refresh 的控制器方法。最初我正在将内容设置到此列表中，但注意到UI会闪烁，一旦在定时器上运行，这将特别烦人。

I have a view which displays a list of workers. This view has a button which calls a controller method named refresh. Originally I was setting the content to this list, but noticed that the UI would flicker, which would be especially annoying once this is run on a timer.

我设法使一切工作，而不闪烁使用以下：

I managed to make everything work without flickering using the following:

App.WorkersIndexController = Ember.ArrayController.extend
    refresh: ->
        console.log 'refreshing workers'
        # set a property to a new collection
        @set 'refreshing', App.Worker.find()

    # observer that watches the new collection load
    update: (->
        refreshing = @get 'refreshing'
        return unless refreshing.get('isLoaded')
        # what this question is about...
        Ember.run =>
            @set 'content', refreshing
    ).observes('refreshing.isLoaded')

如您所见，我将刷新的内容设置为临时变量，并观察内容的加载，然后更新内容。内容闪烁较少，直到我添加了一个电话到 Ember.run ，完全删除了闪烁。

As you can see I'm setting the refreshed content to a temporary variable, and observing the loading of the content and then updating the content. The content flickered less until I added a call to Ember.run which removed the flicker entirely.

我明白为什么闪烁正在发生，我明白为什么 Ember.run 使它消失，但我的问题是什么是最好的方式来解决这个问题，而不诉诸 Ember.run ？我觉得叫Ember.run是一个最后的手段...任何帮助将不胜感激！

I understand why the flicker is occurring, and I understand why Ember.run makes it go away but my question is what is the best way to solve this without resorting to Ember.run? I feel like calling Ember.run is kind of a last resort... Any help would be greatly appreciated!

编辑：另外我没有使用余烬数据。 find 方法如下所示：

Also I'm not using ember data. The find method looks like this:

App.Worker.reopenClass
    find: ->
        console.log 'loading workers'
        workers = Em.A []
        request = $.getJSON '/api/admin/workers', (data) =>
            console.log ' -> loaded workers'
            data.forEach (d) =>
                worker = App.Worker.create(d)
                worker.set 'isLoaded', true
                workers.pushObject(worker)
        request.error =>
            console.log ' -> failed to load workers'
            workers.set 'isFailed', true
        request.complete =>
            workers.set 'isLoaded', true
        workers

推荐答案

我已经避免了在类似的情况下闪烁，通过一个固定的列表谁是对象我只是改变。

I have avoided flicker in similar situations by having a fixed list who's objects I just change.

在最简单的情况下，让我们说你正在显示名字，知道你知道你永远不会有超过3个元素，你可以做

In the simplest case, lets' say you were displaying names, and knew that you knew you'd never have more than 3 elements you could make

App.names = [ 
    Ember.Object.create({name:"", active:false}),
    Ember.Object.create({name:"", active:false}),
    Ember.Object.create({name:"", active:false})
]

，并将您的模板

{{#each App.names}}
    {{#if active}}
        <li> {{name}} </li>
    {{/if}}
{{/each}}

你可以通过运行

  App.names[0].set("name", "Frank");
  App.names[0].set("active", true);

并更新列表而没有任何闪烁。列表中只有一个元素一次更改，因此您没有从整个列表中重新绘制闪烁。

and update the list without any flicker. Only a single element in the list is changed at a time, so you don't have the flicker from the whole list being redrawn.

实际上，您可能需要App.names作为ArrayController，以便您可以优雅地扩展列表，但其中的要点将会起作用。

In practical terms you might need App.names to be an ArrayController so that you can handle expanding the list gracefully, but the gist of that will work.

这篇关于刷新Ember中的内容时减轻闪烁的UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！