Создание флажков MDL с помощью JavaScript

Question

Я работаю над списком дел.Пользователь вводит задачу в форму, затем JavaScript добавляет ее в документ HTML.

Я пытаюсь использовать компонент флажка Material Design Lite в элементах моего списка, но флажки не отображаются правильно.Все остальные кнопки и формы ввода отображаются нормально.Я приложил все усилия, чтобы JavaScript точно копировал его, но, похоже, что независимо от того, что я делаю, я не могу заставить его отображаться правильно.

Проверьте CodePen, показывая проблему здесь .

Я закодировал первый элемент списка в HTML, чтобы показать правильный флажок для справки.Добавление последующих элементов списка через форму покажет неправильный флажок.

Код JavaScript:

    //create list item
    let newLi = document.createElement('li');  
    newLi.classList.add('mdl-list__item');

    //create primary span container
    let toDoContainer = document.createElement('span');
    toDoContainer.classList.add('mdl-list__item-primary-content');

    //create checkbox and attach to primary span container
    let toDoLabel = document.createElement('label');
    toDoLabel.classList.add('mdl-checkbox', 'mdl-js-checkbox', 'mdl-js-ripple-effect');
    toDoLabel.htmlFor = 'list-checkbox-1';
    let checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.id = 'list-checkbox-1';
    checkbox.classList.add('mdl-checkbox__input');
    toDoLabel.appendChild(checkbox);
    toDoContainer.appendChild(toDoLabel);

    //create text and attach to primary span container
    let labelText = document.createTextNode(newToDoText.value);
    toDoContainer.appendChild(labelText);

    //append primary span container container to list item
    newLi.appendChild(toDoContainer);

    //create secondary span container
    let deleteContainer = document.createElement('span');
    deleteContainer.classList.add('mdl-list__item-secondary-action');

    //create delete button and append to secondary span container
    let deleteButton = document.createElement('button');
    deleteButton.classList.add('mdl-button', 'mdl-js-button', 'mdl-button--icon');
    let icon = document.createElement('i');
    let text = document.createTextNode('delete');
    icon.classList.add('material-icons');
    icon.appendChild(text);
    deleteButton.appendChild(icon);
    deleteContainer.appendChild(deleteButton);
    deleteContainer.addEventListener('click', function(e) {
        toDoList.removeChild(deleteButton.parentNode.parentNode);
    });

    //append secondary span container to list item
    newLi.appendChild(deleteContainer);

    //add list item to to-do list
    toDoList.appendChild(newLi);

    //empty form input
    newToDoText.value = '';

Как должен выглядеть правильный HTML-код:

<li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-2">
                    <input type="checkbox" id="list-checkbox-2" class="mdl-checkbox__input" />
                </label>
                Finish this to-do list app
            </span>
            <span class="mdl-list__item-secondary-action">
                <button class="mdl-button mdl-js-button mdl-button--icon">
                    <i class="material-icons">delete</i>
                </button>
            </span>
 </li>

У всех естьидея, что я делаю не так?

Рекомендации MDL

Answer 1

Для каждого элемента mdl, который вы вставляете, вы должны вызывать componentHandler.upgradeElement (pasteElement)

Причина в том, что материал манипулирует вашим домом, превращаясь в то, чем он является, и связывает все события, когда вы добавляете класс материала к элементу при начальной загрузке. Когда вы добавляете элементы материала позже, этого не происходит, если вы явно не укажете обновить добавленный элемент до элемента материала.

https://getmdl.io/started/index.html#dynamic

componentHandler.upgradeElement(checkbox)
toDoLabel.appendChild(checkbox);
componentHandler.upgradeElement(toDoLabel)
toDoContainer.appendChild(toDoLabel);

EDIT В качестве альтернативы вы можете добавить класс, такой как "newMdl" для новых элементов материала, а затем вызвать componentHandler.upgradeElements (newMdlElements)

deleteContainer.classList.add('mdl-list__item-secondary-action', 'newMdl');
let deleteButton = document.createElement('button');
deleteButton.classList.add('mdl-button', 'mdl-js-button', 'mdl-button--icon', 'newMdl');
deleteContainer.appendChild(deleteButton);
newLi.appendChild(deleteContainer);
let mdlElemets = document.querySelectorAll(".newMdl");
componentHandler.upgradeElements(mdlElemets);

https://codepen.io/anon/pen/BbPRwq