1

表示目的で小さな変更を加えるまでは正常に機能していたノックアウト テンプレートがあります。現在、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 出力ですが、そうすると UI 要素が適切に整列しません。余分な div を span タグに置き換えてみましたが、HTML は正しくレンダリングされますが、UI コントロールがずれています。どんな助けでも大歓迎です。

4

1 に答える 1

0

段落タグを 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>
于 2014-03-17T20:53:34.117 に答える