向Ember添加自定义脚本

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也不会启动。大部分代码与此问题中的代码相同。

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示例

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