Кнопка удаления дисплея с шаблонами js - PullRequest
Новая
       9

Кнопка удаления дисплея с шаблонами js

2 голосов
/ 22 апреля 2020

Следующий код генерирует веб-сайт, который дает пользователю возможность ввести ingredient с соответствующими amount (полями ввода).

После того, как пользователь нажал кнопку add, значения ingredient и amount отображаются в таблице. Кроме того, третья ячейка добавленной строки должна быть кнопка удаления .

Единственная часть предоставленного кода, которая в данный момент не работает, - это создание кнопки удаления. Я супер новичок в веб-разработке, а также в библиотеке руля.

Мой вопрос заключается в том, как правильно отобразить кнопку при использовании библиотеки руля? В настоящее время вместо фактической кнопки отображается [object HTMLButtonElement]. Я уверен, что это возможно, но я не смог найти правильный путь.

Код: 

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
        <script id="result" type="text/template">
            <tr>
                <td> {{ ingredient }} </td> 
                <td> {{ amount }} </td>
                <td> {{ change }} </td>
            </tr>
        </script>

        <script>
            const template = Handlebars.compile(document.querySelector('#result').innerHTML);

            document.addEventListener('DOMContentLoaded', () => {
                document.querySelector('#add').onclick = ()  => {

                    // create the remove button (HERE IT GOES WRONG)
                    const btn = document.createElement("BUTTON");
                    btn.innerHTML = "remove element";
                    btn.className = "remove";

                    // get the inputs
                    const ingredient = document.querySelector('#ingredient').value;
                    const amount = document.querySelector('#amount').value;

                    const content = template({'ingredient': ingredient, 'amount': amount, 'change': btn});
                    document.querySelector('#tab').innerHTML += content;
                };
            });
        </script>
    </head>
    <body>
        <input type="text" id="ingredient">
        <input type="text" id="amount">
        <button id="add">Add</button>
        <table id="tab">
            <tr>
                <th>Ingredient:</th>
                <th>Amount:</th>
                <th>Change:</th>
            </tr>
        </table>
    </body>
</html>

Я благодарен за любую помощь.

1 Ответ

1 голос
/ 22 апреля 2020

Вы смешиваете два разных способа добавления контента в DOM. Первый - использование Handlebars для компиляции шаблонной строки HTML в функцию, которая будет возвращать интерполированную строку HTML при передаче объекта контекста данных. Второй - использование document.createElement для создания узлов DOM, которые будут напрямую вставлены в DOM с помощью таких методов DOM, как .appendChild().

Создаваемой вами переменной btn назначается к нему результат document.createElement("BUTTON"), который является HTML Button Element Object. Когда вы передаете это своей функции скомпилированного шаблона, Handlebars знает, как попытаться ее преобразовать в строку, чтобы сделать ее частью визуализированного вывода. Когда этот объект является строковым, он выдает «[object HTMLButtonElement]».

Вы можете сделать некоторую неприятную работу, чтобы получить обработанную HTML строку вашего элемента кнопки и передать ее в функцию шаблона, но чем лучше нужно оставить HTMLing для шаблона.

Это будет означать удаление всего вашего кода const btn и замену этой переменной в вашем шаблоне на HTML.

Поэтому: 

<td> {{ change }} </td>

Становится: 

<td><button class="remove">remove element</button></td>

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

...