Introduce JQuery code in template


#1

Hi!

We want to do some height-adjusting (similar to how we think Trello does it) with JQuery, by using $(document).ready. For prototyping we just put a <script> tag into the bottom of a handlebars template, with the JQuery code that starts the resizing logic.

I’m not that familiar yet with JS internals, so maybe it was a stupid idea to put this into the template - anyway, the result is that code in this <script> tag is only executed if the page is refreshed. It is not executed if the page is reached via URL manipulation or router transition.

Obviously, creating a top-level view class for this template and using didInsertElement should work, but we would like to keep jQuery and Ember code separate. Is there another way? Or should in-template scripting actually work?


#2

Is there any reason to do that? It looks to me that such distinction just makes the code more complicated. Ember.js code uses jQuery anyway, for example you can call this.$() in any view and it will return the jQuery element containing DOM node for the view. I would just use didInsertElement, as you mentioned.


#3

Thanks! Well, for now we will use didInsertElement - the reason why we would like to separate this is that we don’t really need a view object here, just the template. But I guess it’s ok, it’s just one more class.


#4

View class comes at a cost, so if you need a lot of such templates, you may look into alternatives. If it’s just one occurrence then you’re right, it will not make a difference. The other thing is that you often get a view anyway, you just don’t create it explicitly (for example linkTo helper uses LinkView under the hood).


#5

I have to disagree. One of my apps has over 5000 ember views on a single page and I didn’t notice any major performance issue. The only source of slowness was manipulating the complex data structure, but aprat from that the views are really fast and efficient.

Also if you’re displaying a lot of data I recommend you to take a look at Ember Table


#6

Interesting. I have never dug into performance problems with Ember.js, but I was always pretty sure that inserting a lot of views is one of the things, which makes the app slow. I will need to look closer at the problem.