问题

Question

问题

我有一个显示工人列表的视图。此视图有一个按钮，用于调用名为refresh的控制器方法。最初我将content设置为此列表，但注意到UI会闪烁，一旦在计时器上运行，这将特别烦人。

我设法使用以下内容使一切正常工作而不会闪烁：

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调用之前，内容闪烁得更少。

我理解为什么闪烁正在发生，我理解为什么Ember.run会让它消失但我的问题是如何在不诉诸Ember.run的情况下解决这个问题的最佳方法是什么？我觉得打电话给Ember.run是最后的手段...任何帮助都会非常感激！

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

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

Answer 1

我在类似的情况下通过固定列表来避免闪烁，这些对象我只是改变了。

在最简单的情况下，让我们说你正在显示名字，并且知道你知道你从来没有超过3个元素可以制作

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);

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

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

在Ember中刷新内容时，可以减轻闪烁的UI

问题

1 个答案: