Ember.js removes x-editable from values in table when using sortProperties

I have a table with data that I sort using ember's built in sortProperties in the controller. I also have a filtering mechanism where I filter the data with the following code:

  filteredContent: function() {
    var filter = this.get('filter'),
        regex  = new RegExp(filter, 'gi'),
        data   = this.get('arrangedContent');

    return data.filter(function(item) {
      return item.get('name').match(regex) || item.get('email').match(regex) || (item.get('role') && item.get('role').match(regex));
    });
  }.property('sortProperties', 'sortAscending', 'filter', '@each.isNew'),

I use a plugin called x-editable (http://ift.tt/13jIdpD) to make each value in the table editable by simply clicking on it. Unfortunately, this doesn't work when using the filtering and ember's sortProperties. When disabling those functions, x-editable works, but filtering and sortProperties seemingly removes the generated x-editable html/logic and replaces it with new html:

It goes from this:

<a class="user-email editable editable-click" data-type="text" data-id="email" data-pk="1" data-placement="right" data-placeholder="Required" data-title="Enter user email">dummy_email_214@gmail.com</a>

To this:

<a class="user-email" data-type="text" data-id="email" data-pk="1" data-placement="right" data-placeholder="Required" data-title="Enter user email"><script id="metamorph-789-start" type="text/x-placeholder"></script>dummy_email_214@gmail.com<script id="metamorph-789-end" type="text/x-placeholder"></script></a>

Now, I get that ember needs to replace the content of the a in order to create the value binding, but it seemingly replaces the whole a and recreates it, but without the x-editable html and logic.

Does anyone have a solution to this?

Thanks

Theo