Ellipsis(DotDotDot plugin) in Ember


I need integrate jquery dotdotdot in Ember. I have index page with posts preview. PostsIndexView has ItemView. In ItemView I insert this:

didInsertElement: ->
      ellipsis: ''
      after: '<span class="ellipsis">…</span>'
      wrap: 'letter'
      watch: 'window'

It works, but window resizing not handling.

What is the best way to integrate this plugin?


I’m not familiar with that jQuery plugin, but does it work outside of Ember if you resize the window? It doesn’t seem like an integration problem, but rather an issue with the dotdotdot configuration.

Also, quite likely you will want to unwatch on willDestroy.

willDestroy: ->


Thanks for reply! It works outside of Ember, see official example http://dotdotdot.frebsite.nl/

This snippet throw error “Cannot read property ‘dotdotdot’ of undefined”.


Quoting from emberjs/ember.js#9347 by @mixonic:

The issue here is that dotdotdot is cloning the content you point it at:


And then replacing whatever was on the page with its own generated DOM. There isn’t a way to keep track of the data bindings if the DOM has been re-built.

dotdotdot just doesn’t seem compatible with data-binding. Try commenting out that line in your JSBin, seems to work fine.

And then later in that thread:

It may have worked in 1.7.1, but that was more by chance than design. A 3rd party destroying the DOM nodes that Ember binds to will be a difficult or impossible thing to support.

Apologies that this sucks for your app, but dotdotdot is simply a very greedy plugin, in the worst tradition of jquery plugins. If you attached an event handler to that dom, the event handler would also become disconnected. This is not an Ember issue, it is a design flaw in their lib that makes compatibility with any other JavaScript code (Ember or not Ember) intractable.

And in a practical sense, trying to support libraries like this will keep us from ever getting to the amazing rendering performance we want to land with HTMLBars.