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.

Mike Grassotti · Accepted Answer · 2013-02-08 18:22:13Z

2

Consider using the blockless form of {{each}} and move the jQuery code to didInsertElement of each row as follows:

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

edited Feb 8, 2013 at 18:22

answered Feb 7, 2013 at 23:45

Mike Grassotti

19.1k3 gold badges62 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tspore Over a year ago

I like this idea, but Don't understand App.MyView, where did that come from? My calling of that doesn't work. I get: Uncaught Error: assertion failed: Unable to find view at path 'App.MyView' ember.js:52

CraigTeegarden · Accepted Answer · 2013-02-07 19:56:46Z

0

Can you use plain CSS to automatically style the table? This will apply to the rows even if they are added after didInsertElement() is called.

CSS:

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

JSBin example

answered Feb 7, 2013 at 19:56

CraigTeegarden

8,2558 gold badges40 silver badges43 bronze badges

Comments

Shimon Rachlenko · Accepted Answer · 2013-02-07 20:10:36Z

0

You can observe the isLoaded property of controller's content:

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

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

answered Feb 7, 2013 at 20:10

Shimon Rachlenko

5,51742 silver badges51 bronze badges

Collectives™ on Stack Overflow

Adding Custom Scripts to Ember

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related