Knockout JS шаблон HTML не отображается должным образом

Question

У меня есть шаблон нокаута, который работал нормально, пока я не внес в него небольшие изменения в целях отображения. Теперь HTML рендерит по-другому, что заставляет некоторые из моих SCSS не применять определенные стили. Вот текущий шаблон:

<script type="text/html" id="dropDownTextBoxTemplate">
    <div class="top-level-div-class">
        <p class="paragraph-class">
            <div>
                <label data-bind="text: DisplayValue"></label>
            </div>
            <div>
                <select data-bind="attr: { id: Name, name: Name }, options: Comparisons, optionsValue: 'Name', optionsText: 'DisplayValue', optionsCaption: 'Unselected', value: SelectedComparison"></select>
                <!-- ko if: SelectedComparison() === undefined -->
                <input type="text" disabled="disabled" data-bind="attr: { id: Name + '-value', name: Name + '-value', 'data-min-value': TextboxMinValue, 'data-max-value': TextboxMaxValue, 'data-format': TextboxFormat }, value: TextboxValue" />
                <!-- /ko -->
                <!-- ko ifnot: SelectedComparison() === undefined -->
                <input type="text" data-bind="attr: { id: Name + '-value', name: Name + '-value', 'data-min-value': TextboxMinValue, 'data-max-value': TextboxMaxValue, 'data-format': TextboxFormat }, value: TextboxValue" />
                <!-- /ko -->
            </div>
        </p>
    </div>
</script>

Внесенное мной изменение заключалось в добавлении тегов div к метке, элементам select и input. Вот HTML-код, который отображается.

<div class="top-level-div-class">
    <p class="paragraph-class"></p>
    <div>
        <label data-bind="text: DisplayValue">My Display Value:</label>
    </div>
    <div>
        <select data-bind="attr: { id: Name, name: Name }, options: Comparisons, optionsValue: 'Name', optionsText: 'DisplayValue', optionsCaption: 'Unselected', value: SelectedComparison" id="attendence" name="attendence">
            <option value="">Unselected</option>
            <option value="gtet">Greater than or equal to</option>
            <option value="ltet">Less than or equal to</option>
        </select>
        <!-- ko if: SelectedComparison() === undefined -->
        <input type="text" disabled="disabled" data-bind="attr: { id: Name + '-value', name: Name + '-value', 'data-min-value': TextboxMinValue, 'data-max-value': TextboxMaxValue, 'data-format': TextboxFormat }, value: TextboxValue" id="attendence-value" name="attendence-value" data-min-value="0" data-max-value="99" data-format="range">
        <!-- /ko -->
        <!-- ko ifnot: SelectedComparison() === undefined -->
        <!-- /ko -->
    </div>
    <p></p>
</div>

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

Answer 1

Попробуйте использовать тег абзаца как div. Нельзя заключать div в теги абзаца.

вот изменение, которое вы должны попробовать.

 <script type="text/html" id="dropDownTextBoxTemplate">
        <div class="top-level-div-class">
            <div class="paragraph-class">
                <div>
                    <label data-bind="text: DisplayValue"></label>
                </div>
                <div>
                    <select data-bind="attr: { id: Name, name: Name }, options: Comparisons, optionsValue: 'Name', optionsText: 'DisplayValue', optionsCaption: 'Unselected', value: SelectedComparison"></select>
                    <!-- ko if: SelectedComparison() === undefined -->
                    <input type="text" disabled="disabled" data-bind="attr: { id: Name + '-value', name: Name + '-value', 'data-min-value': TextboxMinValue, 'data-max-value': TextboxMaxValue, 'data-format': TextboxFormat }, value: TextboxValue" />
                    <!-- /ko -->
                    <!-- ko ifnot: SelectedComparison() === undefined -->
                    <input type="text" data-bind="attr: { id: Name + '-value', name: Name + '-value', 'data-min-value': TextboxMinValue, 'data-max-value': TextboxMaxValue, 'data-format': TextboxFormat }, value: TextboxValue" />
                    <!-- /ko -->
                </div>
            </div>
        </div>
    </script>