jquery - Adding Custom Scripts to Ember

Question

So on my app, as it is loading in a table from the rails DB side, it comes in very late, and my little $('tr:even').addClass("trAlt"); - only reads 1 tr, and doesn't apply the css class for styling. I have placed the script on didInsertElement as follows:

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

But the inital load is 1 tr row (the headings), and then Ember isn't firing off the even as the view changes. Most of the code is the same as from this 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

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

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

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

Answer 3

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

CSS：

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

JSBin 示例