KnockoutJS:无法处理绑定"if:function(){return conversations}”;
KnockoutJS : Unable to process binding "if: function (){return conversations }"
首先,这是我的视图
<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';
};
}
为了支持虚拟元素Knockout,使用不识别结束元素的DOM模型。所以,当循环遍历下一个同级元素时,它找不到结束注释,因此它抛出了像您这样的异常。
看看getVirtualChildren
函数:https://github.com/knockout/knockout/blob/8decc433942d7413b47768e0f45c304e8f15aa09/src/virtualElements.js#L27
相关文章:
- jquery if语句返回return wong语句
- 函数在return语句之前返回空对象
- Javascript Return and if/else
- 在ES6 Promise中,我应该在解决/拒绝之前使用return吗
- Angular promise return"未定义的“;值.NET MVC
- Javascript用函数return替换局部变量
- JavaScript中的“return cb()”有缺点吗
- JS-fn()中返回后方括号的含义{return{}[]}
- 为什么javascript在'return false'
- return false不阻止点击
- 当使用return语句时,循环不会中断
- 如何在不使用return的情况下跳过下一个if语句
- return false不停止表单提交
- {React jsx babel es6 webpack}如何在渲染中进行注释(return(//||/**/))
- 表单提交没有'调用return false后无法工作
- Jquery ajax return null
- Php ajax return json or html
- Fizz Buzz return value javascript
- JavaScript:return WebForm_FireDefaultButton();这个函数在做什么,我该如何复
- KnockoutJS:无法处理绑定"if:function(){return conversations}”;