Knockout Error: Found End Comment Without a Matching opening comment, as child of [object Text]

Question

重新访问过去运行良好的一些代码，我收到控制台错误 找到没有匹配的开始注释的结束注释，作为 [object Text] 的子项，但所有我的标签似乎已关闭。

我删除了典型的 HTML 评论标签，认为验证过程不喜欢这些标签，但即使如此，我仍然收到错误。

我错过了什么？

    <div id="CC-guidedNavigation-section">
      <!-- ko if: guidedNavigationViewModel().displayWidget && displayRefineResults -->
        <div class="row guided-nav-holder">
          <!-- ko foreach: dimensionDisplay -->
            <div class="dimension-holder row">
                <span class="dimension-display-name" data-bind="text: $data.displayName"></span><br/>
                <!-- ko ifnot: $data.singleSelect -->
                    <!-- ko foreach: $data.refinements -->
                        <!-- ko if: $data.imgSrc -->
                            <!-- ko if: $data.imgSrc.indexOf('|') == -1 -->
                            <div class = "mating-scenarios col-xs-6 col-md-3" data-bind="attr: {for: 'CC-guidedNavigation-refinementCheckboxValue-'+ $parentContext.$index() + '_' + $index()}">
                            
                                   <img data-bind="attr:{src: '/file/general/'+imgSrc, title: label ,id: 'CC-guidedNavigation-refinementCheckboxValue-'+ $parentContext.$index() + '_' + $index()}, click:function(data, event){ return $parents[1].updateSelection($data,$parent,$parentContext.$index(),event)}" alt="img" />
                                    <label class="image-text-guided" data-bind="text: $data.label"></label>
                            </div>
                           

                            <!-- /ko -->
                        <!-- /ko -->
                        <!-- ko ifnot: $data.imgSrc -->
                    
                            <label data-bind="attr: {for: 'CC-guidedNavigation-refinementCheckboxValue-'+ $parentContext.$index() + '_' + $index()}">
                                <input type="checkbox" data-bind="attr: {id: 'CC-guidedNavigation-refinementCheckboxValue-'+ $parentContext.$index() + '_' + $index()}, click:function(data, event){ return $parents[1].updateSelection($data,$parent,$parentContext.$index(),event)}">
                                    <span data-bind="text: $data.label"></span>
                            </label>
                       
                        <!-- /ko -->
                    <!-- /ko -->
                <!-- /ko -->
                
                <!-- ko if: $data.singleSelect -->
                    <!-- ko foreach: $data.refinements-->
                         <label data-bind="attr: {for: 'CC-guidedNavigation-refinementCheckboxValue-'+ $parentContext.$index() + '_' + $index()}">
                            <input type="radio" data-bind="attr: {id: 'CC-guidedNavigation-refinementCheckboxValue-'+ $parentContext.$index() + '_' + $index(), name:'guided-nav-radio' + $parentContext.$index()}, click:function(data, event){ return $parents[1].updateSelection($data,$parent,$parentContext.$index(),event)}">
                                <span data-bind="text: $data.label"></span>
                        </label>
                        

                    <!-- /ko -->
                <!-- /ko -->
            </div>
            <!-- /ko -->

            <div class="contactsRange col-md-5 splitFacets">
                <span class="dimension-display-name">Number of Contacts (Range)</span>
                <br/>
                <label>
                    MIN <br/>
                    <input type="number" name="minContactsEntered" data-bind="textInput: $rawData.minContactsEntered, event:{blur: $rawData.updateRangeUrl}, disable: maxLengthEntered() || maxWidthEntered() || maxHeightEnteredInches()">
                </label>
                <label>
                    MAX <br/>
                    <input type="number" name="maxContactsEntered" data-bind="textInput: $rawData.maxContactsEntered, event:{blur: $rawData.updateRangeUrl}, disable: maxLengthEntered() || maxWidthEntered() || maxHeightEnteredInches()">
                </label>
            </div>
            <div class="col-xs-12 col-md-2" style="padding-top: 60px; font-size: 1.2em">-or-</div>
            <div class="col-md-5 splitFacets">
            <div>
                
      
                <label>
               <span class="dimension-display-name">Length Max (Range)</span>
                <br/>
                    <input type="number" name="maxLengthEntered" data-bind="textInput: $rawData.maxLengthEntered, event:{blur: $rawData.updateRangeUrl}, enable: !minContactsEntered() && !maxContactsEntered()">
                    <span>mm</span>&nbsp;&nbsp; <span data-bind="text: '('+$rawData.maxLengthEnteredInches()+' in.)'"></span>
                </label>
            </div>
            
            <div class="">
                
         
                <label>
                    <span class="dimension-display-name">Width Max (Range)</span>
                <br/>
               
                    <input type="number" name="maxWidthEntered" data-bind="textInput: $rawData.maxWidthEntered, event:{blur: $rawData.updateRangeUrl}, enable: !minContactsEntered() && !maxContactsEntered()">
                    <span>mm</span>&nbsp;&nbsp; <span data-bind="text: '('+$rawData.maxWidthEnteredInches()+' in.)'"></span>
                </label>
            </div>
            <div class=" remove-border">
                
       
                <label>
              <span class="dimension-display-name">Height Max (Range)</span>
                <br/>
                    <input type="number" name="maxHeightEntered" data-bind="textInput: $rawData.maxHeightEntered, event:{blur: $rawData.updateRangeUrl},  enable: !minContactsEntered() && !maxContactsEntered()">
                    <span>mm</span>&nbsp;&nbsp; <span data-bind="text: '('+$rawData.maxHeightEnteredInches()+' in.)'"></span>
                </label>
            </div>
            </div>
          <!-- /ko -->  
        </div> 
        <div class="guided-nav-buttons col-xs-12">
            <div class="col-xs-6 col-md-3">
                <a href="#">
                    <button class="btn btn-primary filter-button" data-bind="click: findMatchingProducts">Find Matching Products</button>
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <button class="btn btn-secondary reset-button" data-bind="click : clearRefinement()">Reset All Values</button>
            </div>
        </div>
      <!-- /ko -->       
    </div>```

Any help you can provide is greatly appreciated!

Answer 1

根据缩进，我想这是不需要的结束标记：

      <!-- ko if: guidedNavigationViewModel().displayWidget && displayRefineResults -->
        <div class="row guided-nav-holder">
          <!-- ko foreach: dimensionDisplay -->
            <div class="dimension-holder row">
                <span class="dimension-display-name" data-bind="text: $data.displayName"></span><br/>
                <!-- ko ifnot: $data.singleSelect -->
                    <!-- ko foreach: $data.refinements -->
                        <!-- ko if: $data.imgSrc -->
                            <!-- ko if: $data.imgSrc.indexOf('|') == -1 -->
                            <div class = "mating-scenarios col-xs-6 col-md-3" data-bind="attr: {for: 'CC-guidedNavigation-refinementCheckboxValue-'+ $parentContext.$index() + '_' + $index()}">
                            
                                   <img data-bind="attr:{src: '/file/general/'+imgSrc, title: label ,id: 'CC-guidedNavigation-refinementCheckboxValue-'+ $parentContext.$index() + '_' + $index()}, click:function(data, event){ return $parents[1].updateSelection($data,$parent,$parentContext.$index(),event)}" alt="img" />
                                    <label class="image-text-guided" data-bind="text: $data.label"></label>
                            </div>
                           

                            <!-- /ko -->
                        <!-- /ko -->
                        <!-- ko ifnot: $data.imgSrc -->
                    
                            <label data-bind="attr: {for: 'CC-guidedNavigation-refinementCheckboxValue-'+ $parentContext.$index() + '_' + $index()}">
                                <input type="checkbox" data-bind="attr: {id: 'CC-guidedNavigation-refinementCheckboxValue-'+ $parentContext.$index() + '_' + $index()}, click:function(data, event){ return $parents[1].updateSelection($data,$parent,$parentContext.$index(),event)}">
                                    <span data-bind="text: $data.label"></span>
                            </label>
                       
                        <!-- /ko -->
                    <!-- /ko -->
                <!-- /ko -->
                
                <!-- ko if: $data.singleSelect -->
                    <!-- ko foreach: $data.refinements-->
                         <label data-bind="attr: {for: 'CC-guidedNavigation-refinementCheckboxValue-'+ $parentContext.$index() + '_' + $index()}">
                            <input type="radio" data-bind="attr: {id: 'CC-guidedNavigation-refinementCheckboxValue-'+ $parentContext.$index() + '_' + $index(), name:'guided-nav-radio' + $parentContext.$index()}, click:function(data, event){ return $parents[1].updateSelection($data,$parent,$parentContext.$index(),event)}">
                                <span data-bind="text: $data.label"></span>
                        </label>
                        

                    <!-- /ko -->
                <!-- /ko -->
            </div>
========>   <!-- /ko -->

            <div class="contactsRange col-md-5 splitFacets">
                <span class="dimension-display-name">Number of Contacts (Range)</span>
                <br/>
                <label>
                    MIN <br/>
                    <input type="number" name="minContactsEntered" data-bind="textInput: $rawData.minContactsEntered, event:{blur: $rawData.updateRangeUrl}, disable: maxLengthEntered() || maxWidthEntered() || maxHeightEnteredInches()">
                </label>
                <label>
                    MAX <br/>
                    <input type="number" name="maxContactsEntered" data-bind="textInput: $rawData.maxContactsEntered, event:{blur: $rawData.updateRangeUrl}, disable: maxLengthEntered() || maxWidthEntered() || maxHeightEnteredInches()">
                </label>
            </div>
            <div class="col-xs-12 col-md-2" style="padding-top: 60px; font-size: 1.2em">-or-</div>
            <div class="col-md-5 splitFacets">
            <div>
                
      
                <label>
               <span class="dimension-display-name">Length Max (Range)</span>
                <br/>
                    <input type="number" name="maxLengthEntered" data-bind="textInput: $rawData.maxLengthEntered, event:{blur: $rawData.updateRangeUrl}, enable: !minContactsEntered() && !maxContactsEntered()">
                    <span>mm</span>&nbsp;&nbsp; <span data-bind="text: '('+$rawData.maxLengthEnteredInches()+' in.)'"></span>
                </label>
            </div>
            
            <div class="">
                
         
                <label>
                    <span class="dimension-display-name">Width Max (Range)</span>
                <br/>
               
                    <input type="number" name="maxWidthEntered" data-bind="textInput: $rawData.maxWidthEntered, event:{blur: $rawData.updateRangeUrl}, enable: !minContactsEntered() && !maxContactsEntered()">
                    <span>mm</span>&nbsp;&nbsp; <span data-bind="text: '('+$rawData.maxWidthEnteredInches()+' in.)'"></span>
                </label>
            </div>
            <div class=" remove-border">
                
       
                <label>
              <span class="dimension-display-name">Height Max (Range)</span>
                <br/>
                    <input type="number" name="maxHeightEntered" data-bind="textInput: $rawData.maxHeightEntered, event:{blur: $rawData.updateRangeUrl},  enable: !minContactsEntered() && !maxContactsEntered()">
                    <span>mm</span>&nbsp;&nbsp; <span data-bind="text: '('+$rawData.maxHeightEnteredInches()+' in.)'"></span>
                </label>
            </div>
            </div>
          <!-- /ko -->  
        </div> 
        <div class="guided-nav-buttons col-xs-12">
            <div class="col-xs-6 col-md-3">
                <a href="#">
                    <button class="btn btn-primary filter-button" data-bind="click: findMatchingProducts">Find Matching Products</button>
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <button class="btn btn-secondary reset-button" data-bind="click : clearRefinement()">Reset All Values</button>
            </div>
        </div>
      <!-- /ko -->       
    </div>

Knockout Error: Found End Comment Without a Matching opening comment, as child of [object Text]

Knockout Error: Found End Comment Without a Matching opening comment, as child of [object Text]

javascript

knockout.js