KnockoutJS：無法處理綁定 「如果：函數（）{返回對話}」

Question

首先，這是我的看法

<div data-knockout="messenger-block"> 
<div id="messenger-attachment-container" class="container-messenger"> 
    <div style="display:none" data-bind="visible: conversations().length > 0"> 
    </div> 
</div> 
<div id="messenger-dialog-container" class="container-messenger-bottom"> 
    <div data-bind="visible: conversations().length > 0, if: conversations"> 
    <!-- ko foreach: conversations --> 
     <div class="display-discussion-block object-shadow-near"> 
      <div class="display-discussion-header"> <!-- Quand un nouveau message appliquer la classe .display-discussion-header-active --> 
       <div data-bind="if: receiver"> 
        <div class="display-avatar object-shadow-near" 
         data-bind="style: { backgroundImage: 'url(' + receiver().profilePicture.url + ')' }"> 
        </div> 
       </div> 

       <div class="status connected"></div> 
       <a href="#"> 
        <div data-bind="if: receiver"> 
         <span data-bind="text: receiver().firstname"></span> <span data-bind="text: receiver().lastname"></span> 
        </div> 
       </a> 

       <button class="btn-options messenger-popover-action"></button> 
       <div class="popover-standard messenger-options" style="display:none; margin-left : -80px; margin-top : 21px;"> 
        <ul> 
         <li class="attach-detach">Attacher</li> 
         <li>Afficher la conversation complète</li> 
        </ul> 
       </div> 
      </div> 
      <div class="container-discussion-body"> 
       <div class="container-discussion"> 
        <div data-bind="if: conversation() && conversation().messages"> 
        <!-- ko foreach: conversation().messages --> 
         <!-- ko if: ($index == 0 || sender.id != $parent.messages[$index].sender.id) --> 
          <!-- ko if: $index > 0 --> 
            </div><!-- block-discussion --> 
           </div><!-- container-msg --> 
          <!--/ko--> 
          <div class="block-discussion"> 
           <div class="container-msg"> 
         <!--/ko--> 
         <div data-bind="css: $parents[1].blockMessageClass(sender.id)"> 
          <span data-bind="text: content"></span> 
         </div> 
         <!-- ko if: $parents[1].appUser().id == sender.id --> 
          <div style="clear:both"></div> 
         <!--/ko--> 
        <!--/ko--> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="container-submit"> 
       <form> 
        <div class="form-group"> 
         <textarea class="form-control" data-toggle="submit-enter" placeHolder="Répondre quelque chose.." rows="1"></textarea> 
         <div class="block-icons"> 
          <div class="icons icon-add-img"></div> 
          <div class="icons icon-add-smiley"></div> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    <!--/ko--> 
    </div> 
</div> 

一切工作，但是當我添加這些行：

<!-- ko if: $index > 0 --> 
     </div><!-- block-discussion --> 
    </div><!-- container-msg --> 
<!--/ko--> 

我從瀏覽器中收到以下錯誤：「錯誤：無法處理綁定」if：function（）{return conversations}「 消息：無法找到要匹配的結束註釋標記：ko foreach：對話「。

我不知道爲什麼這些線路特別會造成問題。如果我放一些，它就會破裂。

這裏是我的JS：

var ConversationModel = { 
    conversations: ko.observableArray().publishOn("conversationModel"), 
    open: function(userId){ 
     for(var i = 0; i < this.conversations().length; i++){ 
      if(this.conversations()[i]().userId == userId){ 
       return; 
      } 
     } 

     var self = this; 
     var obj = ko.observable({ 
      userId: userId, 
      receiver: ko.observable(), 
      conversation: ko.observable() 
     }); 

     self.conversations.push(obj); 

     UserManager.getUserData(userId, function(user){ 
      obj().receiver(user); 
      ko.postbox.publish("conversationModel", self.conversations()); 

      $.getJSON(EvoRoutes.messenger.getConversation, "receiver=" + userId, function(data){ 
       obj().conversation(data); 
       ko.postbox.publish("conversationModel", self.conversations()); 
      }); 
     }); 
    } 
}; 
function ConversationDialogViewModel(){ 
    var self = this; 

    this.conversations = ko.observableArray().subscribeTo("conversationModel"); 
    this.appUser = ko.observable().subscribeTo('appUserTopic'); 

    this.blockConversationClass = function(id){ 
     return (id == self.appUser().id) ? 'user-discussion-block' : 'other-discussion-block'; 
    }; 

    this.blockMessageClass = function(id){ 
     return (id == self.appUser().id) ? 'user-display-msg' : 'other-display-msg'; 
    }; 
} 

Answer 1

支持虛擬元素淘汰賽使用DOM模型，它不承認關閉元素。因此，當循環訪問下一個兄弟元素時，它無法找到關閉註釋，因此它會拋出類似於您的異常。

在getVirtualChildren功能請看： https://github.com/knockout/knockout/blob/8decc433942d7413b47768e0f45c304e8f15aa09/src/virtualElements.js#L27