Почему я не вижу анимацию дизайна материала при использовании внутри шаблона handlebars.js

Question

Я работаю над небольшой страницей, где я загружаю динамический контент с помощью handlebars.js. Я начал использовать компоненты дизайна материалов в этих шаблонах. но когда я использую эти компоненты в своих шаблонах, анимация не работает. Когда я помещаю эти mdl-фрагменты прямо в мой индексный файл, он работает нормально.

Я предполагаю, что некоторые обработчики событий отсутствуют: я добавляю свои собственные обработчики событий после каждого обновления, которые устанавливают / удаляют классы is-focus /is-dirty.

Но должен быть лучший способ сделать это для всех компонентов MDL.

Я включил handlebars.min.js, jquery.min.js, material.min.js и material-components-web.min.js в свой index.html.

в моей функции инициализации я добавляю шаблоны руля в div:

$(function() {
     console.log("ready!");
     init();
    });

это шаблон, где я пытаюсь вставить текстовое поле MDL

<script id="projectInfo-template" type="text/x-handlebars-template">
      <div class="row proInfosText">

          <div class="proNameText mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-upgraded {{isActive}}" data-upgraded=",MaterialTextfield">
            <input class="mdl-textfield__input proNameValue" maxlength="20" value="{{Name}}" type="text">
            <label class="mdl-textfield__label" for="sample3">Title</label>
          </div>

      </div>
</script>