Changing el of Ractive Object

Question

In our project we are using Ractive together with Backbone. Backbone.View has a "setElement" method, that basically sets the el property of a Backbone.View, thus allowing to attach the View to a different element of the DOM. I was wondering if there is a similar functionality for a Ractive object. Simply changing the el property of a Ractive object doesn't do the trick.

var oRactive = new Ractive(
{
    "data": someData,
    "el": someDomElement,
    "template": someTemplate
});

// ... after doing some other stuff we'd like to set oRactive do a different el

// this.doesn't do the trick
oRactive.el = someOtherDomElement;

// this puts the renderedHTML in our DOM element but binding doesn't work
$(someOtherDomElement).html(oRactive.renderedHTML());

I'm not really surprised that the above doesn't work. Question is: Is there a way to make it work or is it generally impossible?

I am aware that I could just append oRactive.el to "someOtherDomElement" but that's not quite what I want.

Answer 1

This isn't something that Ractive currently supports, though it might in future. You could try doing the following:

frag = document.createDocumentFragment();

// move contents into the document fragment...
while ( oRactive.el.firstChild ) {
  frag.appendChild( oRactive.el.firstChild );
}

// ...then into the DOM
someOtherDomElement.appendChild( frag );

// update oRactive.el so oRactive.find() still works
oRactive.el = someOtherDomElement;

Ractive stores references to individual nodes - in most cases it doesn't care about the actual shape of the DOM, and your situation shouldn't pose any obstacles (though I'd be interested to know if you run into any bugs doing this).