Прикрепить/рендерить компонент RactiveJS вне шаблона

У меня есть существующий SPA, который был разработан с использованием вложенных компонентов RactiveJS. Это здорово, и предлагает массу гибкости во всем приложении. В настоящее время я пытаюсь добавить поддержку маршрутизации на стороне клиента, используя страницу. Моя навигация переключает компоненты высокого уровня, используя простую разметку шаблона {{#visible}}{{/visible}} для каждого компонента. Это немного проблематично в текущем состоянии, так как всегда запускает повторную визуализацию всякий раз, когда компонент высокого уровня становится видимым снова.

Есть ли способ отрисовать компонент, например, с именем widget, без использования

<widget></widget>

метод? Я уже "зарегистрировал" компонент у родителя, но, очевидно, при его построении с помощью

new App.components.widget

Я могу контролировать, как/когда он отображается/вставляется/отсоединяется, но теряет признание в иерархии компонентов приложения.


person user1835017    schedule 02.11.2015    source источник


Ответы (1)


Именно для этого есть insert. Вам даже не нужно «прописывать» его в компоненте, в который вы планируете его поместить. Вы можете использовать различные методы find* или nodes, чтобы легко получить ссылку на запланированный элемент контейнера. .

var instance = new YourDetachedWidget({ ... });
instance.insert('#your-container'); // This could be a node, selector or jQuery object
person Joseph    schedule 03.11.2015
comment
Проблема скорее в том, что я теряю возможность ссылаться на родительский экземпляр ractive и его унаследованные данные от глубоко вложенного компонента. - person user1835017; 03.11.2015