JQuery UI, Bootstrap 3 etc

Design
1

Now I love Ember.js but integrating virtually anything that would be deemed as web standard is sheer torture.

I understand the purpose and concept behind didInsertElement but how and where to put related JS code for JQuery UI or Bootstrap makes everything that should be simple much more difficult than it should be.

Am I missing something here? Bootstrap-for-Ember looks promising but it isnt a fix for the issue at hand.

Where do I put document ready functions to initialize js code? And what is the mapping for $.this() etc to all the way elements are called normally?

Love Ember but this is killing me.

1 Like
2

What exactly are you trying to integrate? In most cases you don’t need document ready. Since jQuery UI is all ‘View’ widgets you would put this code in an Ember VIew.

3

Are you referring to this.$() in didInsertElement? This is the current view DOM node as a jQuery object. This allows you to do anything inside that view. You can use elementId, tagName, classNames, etc. to customize that node. From there you can do something like:

this.$().find('.my-class').tooltip({...});

You can also create custom functions and place your code in Ember.run.scheduleOnce, like so (this was for GMaps popovers):

Ember.run.scheduleOnce('afterRender', hiddenPopup, function () {
  // 'this' is 'hiddenPopup'
  var $detached = this.$().detach();

  popup.setContent($detached.get(0));
  this.toggleProperty('isVisible');
});

Where afterRender specifies that you want to run the callback only after the view is rendered in the DOM.