KnockoutJS : Unable to process binding "if: function (){return conversations }"

Question

First, here's my view

<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>

Everything work, but when i add these lines :

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

I get the following error from my browser : "Error: Unable to process binding "if: function (){return conversations }" Message: Cannot find closing comment tag to match: ko foreach: conversations ".

I don't know why these lines in particular make the problem. If i put some , it just breaks.

Here's my 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

To support virtual elements Knockout use DOM model which doesn't recognize closing elements. So while looping through next sibling elements it cannot find closing comment and for that reason it throw exception like yours.

Take a look at getVirtualChildren function: https://github.com/knockout/knockout/blob/8decc433942d7413b47768e0f45c304e8f15aa09/src/virtualElements.js#L27