在KnockoutJS中具有对象属性的forEach

Question

我找到了一些有关此问题的答案，但无法将它们放在一起。 使用淘汰赛的第一天，所以如果我认为它完全错误，请告诉我！

我想代表我的意见清单。 注释包含多个属性，例如{text：...，score：...，...}

我了解我有一个视图模型

 var MatchupViewModel = function(comments) { this.comments = ko.observableArray(comments); } ko.applyBindings(new MatchupViewModel(comments), document.getElementById("leftchat")); 

而且我知道forEach看起来像这样：

• 在玉器中（我正在使用：

 #leftchat.chat(data-bind="forEach: comments") .fullMessage .content p.textcontent(data-bind="text: text, visible: text") img.imagecontent(data-bind="visible: isImage, attr={src: url}") .scorecontainer .buttonContainer p.likeButtonMessage(bind-data="click=voteComment(id, true)") &#x25B2 p.dislikeButtonMessage(bind-data="click=voteComment(id, false)") &#x25BC p.messageScore(data-bind="text: score") 

翻译成html：

 <div id="leftchat" data-bind="forEach: comments" class="chat"> <div class="fullMessage"> <div class="content"> <p data-bind="text: text, visible: text" class="textcontent"></p><img data-bind="visible: isImage, attr={src: url}" class="imagecontent"/> </div> <div class="scorecontainer"> <div class="buttonContainer"> <p bind-data="click=voteComment(id, true)" class="likeButtonMessage">&#x25B2</p> <p bind-data="click=voteComment(id, false)" class="dislikeButtonMessage">&#x25BC</p> </div> <p data-bind="text: score" class="messageScore"></p> </div> </div> </div> 

它抱怨文本不是函数，这是我希望它能够找到的属性。 我该如何解决？

Answer 1

尝试将此data-bind="text: text, visible: text"更改为此data-bind="text: $data"

也可能将此data-bind="forEach: comments"更改为此data-bind="forEach: comments()"

应该正确评估基础数组（尽管在没有（）的情况下应该可以正常工作）

Answer 2

如果您修正了错别字，则您的代码应该可以工作。 forEach应该是foreach ，并且bind-data应该是data-bind （除非您将其设置为自定义绑定）。 看下面的例子。 当text是伪造的值（空，空字符串）时，该节点将被隐藏，否则其值将可见。 对于observable属性也是如此。

 var m = { comments: [ {text: 'a'}, {text: ko.observable('') }, {text: null}, {text: ko.observable('c')} ] }; ko.applyBindings(m); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div id="leftchat" data-bind="foreach: comments" class="chat"> <div data-bind="text: text, visible: text" class="textcontent"></div> </div>