Как Emberjs рендерит шаблон по переменной {{outlet}} без перезагрузки родителя
 

Попытаюсь задать вопрос как я его понимаю, если не совсем понятно, исправьте меня.

Меня интересует, как Ember.js, используя Handlebars рендерит и меняет один шаблон на другой по переменной {{outlet}} исходя приблизительно из такого HTML кода:

<div id="menu">
<a href="templates/template_1">Шаблон один</a>
<a href="templates/template_2">Шаблон два</a>
</div>

{{outlet}}

<script type="text/html" id="template_1">
<h2>Заголовок первого шаблона</h2>
<p>Содержание первого шаблона</p>
</script>

<script type="text/html" id="template_2">
<h2>Заголовок второго шаблона</h2>
<p>Содержание второго шаблона</p>
</script>

Как он делает так, чтобы в переменную Handlebars {{outlet}} записывался один шаблон, а потом туда же с полной заменой записывался второй шаблон, или перезаписывался первый без re-рендеринга шаблона родителя (там где меню и всё остальное).

Может он создаём функцию из шаблона, или ещё как-то, прошу знающих людей объяснить механизм немного, или хотя бы сказать в какую сторону копать. Большое спасибо.

может так: http://jsfiddle.net/Zr6ju/ ?

Была такая мысль, но не сходиться с процессов рендеринга шаблона через Handlebars.

Я могу предположить что при рендере основного шаблона, подшаблон рендерится отдельно и записывается как данные для переменой основного шаблона ({{outlet}}), и когда данные для основного шаблона меняются, к примеру {'outlet': conmpiled_teplate}, то меняется и HTML в основном шаблоне. Вопрос в том, как, и если не так как я думаю, то всё равно - каким образом эта магия происходит.

Ох, круто было бы чтобы кто-то дал ссылку на рабочий код подобного эффекта или сделал что-то похожее но уже с Handlebars.