Question

所以在我的应用程序中，因为它是从rails DB一侧加载到一个表中，它来得很晚，而我的小$（'tr：even'）。addClass（“trAlt”）; - 仅读取1 tr，并且不应用css类进行样式设置。我已将脚本放在didInsertElement上，如下所示：

App.RecordsView = Ember.View.extend({
    templateName: 'records/index',
    contextBinding: 'App.RecordController',
    didInsertElement: function(){
         $('tr:even').addClass("trAlt")
    }
});

但是初始负荷是1 tr（标题），然后随着视野的变化，Ember不会发射。大部分代码与此question.

相同

Answer 1

考虑使用{{each}}的无块形式，并将jQuery代码移动到每行的didInsertElement，如下所示：

App.RecordsView = Ember.View.extend({
    templateName: 'records/index',
    contextBinding: 'App.RecordController'
});

App.RecordRowView = Ember.View.extend({
    templateName: 'records/record',
    tagName: 'tr',
    didInsertElement: function(){
      $('tr:even').addClass("trAlt")
    }
});

// in records/index.hbs
{{each controller itemViewClass="App.RecordRowView"}}

http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_each

Answer 2

您可以使用纯CSS自动设置表格样式吗？这将适用于行，即使在调用didInsertElement()之后添加它们。

<强> CSS：

tr:nth-of-type(even) {
  background-color:red;
}

JSBin example

Answer 3

您可以观察控制器内容的isLoaded属性：

App.RecordsView = Ember.View.extend({
    templateName: 'records/index',
    contextBinding: 'App.RecordController',

    onRecordsLoaded: function () {
        $('tr:even').addClass("trAlt");
    }.observes('App.RecordController.content.isLoaded')
});

将自定义脚本添加到Ember

3 个答案: