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

У меня есть нокаут-шаблон, который работал нормально, пока я не внес в него небольшое изменение для отображения. Теперь 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 вокруг метки, выбора и элементов управления вводом. Вот отображаемый 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-код отображается правильно, но снова элементы управления пользовательского интерфейса не выровнены. Любая помощь будет оценена по достоинству.


javascript knockout.js knockout-templating
person Beehive Inc    schedule 17.03.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте использовать тег абзаца как 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>
person Xavier Me    schedule 17.03.2014