Изменение эл Ractive объекта

В нашем проекте мы используем Ractive вместе с Backbone. В Backbone.View есть метод setElement, который в основном устанавливает свойство el Backbone.View, что позволяет прикрепить представление к другому элементу DOM. Мне было интересно, есть ли аналогичная функциональность для объекта Ractive. Простое изменение свойства el объекта Ractive не помогает.

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());

Я не очень удивлен, что вышеперечисленное не работает. Вопрос: есть ли способ заставить его работать или это вообще невозможно?

Я знаю, что могу просто добавить oRactive.el к «someOtherDomElement», но это не совсем то, что я хочу.


ractivejs
person skeptic35    schedule 08.11.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это не то, что Ractive в настоящее время поддерживает, хотя это может быть в будущем. Вы можете попробовать сделать следующее:

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 хранит ссылки на отдельные узлы - в большинстве случаев ему не важна фактическая форма DOM, и ваша ситуация не должна создавать никаких препятствий (хотя мне было бы интересно узнать, столкнетесь ли вы с какими-либо ошибками при этом) .

person Rich Harris    schedule 08.11.2013
comment
Да, это действительно работает. Спасибо! Никаких проблем не возникало до сих пор. Если я столкнусь с какими-либо ошибками, вы узнаете об этом первым ;) И я бы очень хотел увидеть эту функцию в будущей версии Ractive. - person skeptic35; 08.11.2013
comment
К вашему сведению, теперь это поддерживается — вы можете сделать ractive.insert(node,anchor), чтобы отсоединить экземпляр от его текущего местоположения и повторно вставить его внутри node перед anchor (что необязательно). Вы также можете сделать ractive.detach(), чтобы удалить экземпляр из DOM, не уничтожая его (т.е. повторно вставить позже). Этот метод возвращает фрагмент документа, содержащий все узлы экземпляра. - person Rich Harris; 25.12.2013