1

问题

我有一个显示工人列表的视图。这个视图有一个按钮，它调用一个名为 的控制器方法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 是最后的手段......任何帮助将不胜感激！

编辑：另外我没有使用 ember 数据。该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
4

1 回答 1

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 以便您可以优雅地处理扩展列表，但其要点将起作用。

于 2013-02-14T20:50:17.243 回答