Handlebar Helpers vs Ember Components

Design
1

Can anyone explain which is better, Handlebar Helpers or Ember Components from a performance side, and use-cases.

For example. I use components for buttons like follow and other elements that might need bubbling up events. Other than this case how can I decide which one to use? Case like characters left, and formatting text to have @mentions and urls

2

I can speak to the performance but I can comment on when to use Components vs helpers.

Components are helpful in several scenarios:

Multiple elements that work together

When I was writing that code, I got to a point where I needed to write code that would check if certain elements existed on the page. By using the component, I was guaranteed that the elements existed and it was easy to handle their events inside of the component.

When wrapping 3rd party plugins

Here is a good example of this: javascript - Trying to use Foundation's Orbit slider in Rails/Ember app - Stack Overflow

Helpers are more like functions inside of your template. They’re great for modifying presentation of values, for example if you wanted to add $ sign to currency fields. This kinds of detail is relevant in presentation but not in the logic, so it makes more sense to create a helper rather than keeping that create another property in the view or a controller.

These are the once that I can think of.

1 Like
3

@tarasm Wanna take a guess as to why I need to hit refresh to get my 3rd party plugin to render when navigating by {{linkTo}}?

4

@jtrinker I was hoping @intuitivepixel was going to take a look at that.

Do you have an example up somewhere where I can take a look at the code?

5

@tarasm, I was about to have a look, but Peter Wagenet did already answer the question on SO :slight_smile:

6

Interesting. So I added this.$().foundation(); to didInsertElement inside one of the Views and for that view instead of the slider images being stacked, the slider was gone completely. However, when I open inspector the slider renders properly? Here’s the view:

Ew.ConditionsView = Ember.View.extend({
  didInsertElement: function() {
    $('.hidden-content').hide();
    $('.toggle-bar').click(function (ev) {
   	var t = ev.target

   	$('#info' + $(this).attr('target')).toggle(500);

        return false;
    });
    this.$().foundation();
  }
});

I’d be happy to zip up my files and pass them along if you like. I owe you all one.

7

if you can create a emberjs.jsbin.com then we can all take a look at it :smile:

1 Like
8

Here’s the bin: Thanks!

http://emberjs.jsbin.com/opOyiYU/2/edit

9

@jtrinker I’ve removed the first call to $(document).fundation() and let only the one in the component’s didInsertElement hook, have a look at this working jsbin. Find also the same answer on SO :slight_smile:

Hope it helps.

10

@tarasm Thanks for the detailed explanation :slight_smile: