Question

我有一个把手模板来显示一张桌子。

下拉选项中的内容发生变化，这使得ajax调用获取模板的数据。现在我需要在获取数据后动态地向表行添加CSS类。现在我必须添加100毫秒的超时，以便选择器工作。

因为在我第一次设置类时，表tr不存在。如何知道车把模板是否完成渲染新数据（第一次），因此我不必依赖timeOut功能。这是控制器功能，它为模板设置数据并添加CSS。

    updateData: function(data,index)
    {
        this.set('data',data);

        setTimeout(function() {
            console.log('sleep');
            Ember.$('.table tr').removeClass("active");
            Ember.$('.table tr:eq(' + (index+1) + ')').addClass("active");
        }, 100);

    }

Answer 1

这是使用Ember.View最好解决的问题类型，它会让事情变得更容易。

您可以为表中的每一行创建一个视图，并且在每个视图中，您可以使用classNameBindings属性，该属性将根据绑定的属性添加或删除任意数量的CSS类。

请参阅：http://emberjs.com/api/classes/Ember.View.html

在你的模板中你会有类似的东西：

<table>
  {{#each item in model}}
    {{view 'my-row' ...}}
  {{/each}}
</table>

在你看来，你会有类似的东西：

Ember.View.extend({
    tagName: 'tr',
    classNameBindings: ['active']
})

Answer 2

您可以使用Ember.run.scheduleOnce方法安排在清空afterRender队列后进行CSS类操作（即完全呈现dom）

Click here for more information about the Ember Run Loop

所以在你的例子中，

updateData: function(data,index) {
    this.set('data',data);

    Ember.run.scheduleOnce('afterRender', this, function() {
        console.log('sleep');
        Ember.$('.table tr').removeClass("active");
        Ember.$('.table tr:eq(' + (index+1) + ')').addClass("active");
    });

}

如何知道车把模板何时完成渲染/重新渲染

2 个答案: