Javascript KnockoutJS:无法处理绑定“;if:function(){return conversations}";

Javascript KnockoutJS:无法处理绑定“;if:function(){return conversations}";,javascript,web,knockout.js,Javascript,Web,Knockout.js,首先,这是我的观点 <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> &l

首先,这是我的观点

<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:conversations”

我不知道为什么这些线路会造成问题。如果我放了一些,它就断了

以下是我的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';
    };
}
var会话模型={
对话:ko.observearray().publishOn(“对话模型”),
打开:函数(用户ID){
for(var i=0;i
要支持虚拟元素淘汰,请使用不识别结束元素的DOM模型。所以,当循环遍历下一个同级元素时,它找不到结束注释,因此它会抛出类似于您的异常

查看
getVirtualChildren
函数:

您能提供有效的JSFIDLE吗?您引入的新行导致无效的html标记,Knockout无法解析。好的,谢谢,但我该如何解决这个问题?我知道我应该将“allowUnbalanced”设置为false。ko中是否有更改这些设置的功能?设置
allowUnbalanced
不会解决您的问题,因为这个结束div是由浏览器呈现的,它会更改页面的结构。如果您需要显示层次结构数据,您可以使用模板-然后您可以定义显示注释内容的模板,并使用模板儿童