forEach with KnockoutJS中的对象属性

我已经找到了一些有关这方面的答案，但一直没能把它们放在一起。第一天使用淘汰赛，所以请让我知道如果我正在考虑它完全错误！forEach with KnockoutJS中的对象属性

我想代表我有的评论列表。该意见包含多种属性，例如{文字：......，得分：...，...}

我明白，我有一个视图模型

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>

它抱怨说，文字是不是一个功能，这是我曾希望它本来可以在属性找到。我如何解决这个问题？

来源

2016-09-23 Kristoffer Abell

它会更容易帮助你，如果我们看到一个例子“注释”对象是什么样子。请注意，您有两个拼写错误的绑定数据，而不是数据绑定。 – Tyblitz

谢谢！ - 现在评论看起来是这样的： {text：String，src：String，isImage：Boolean，src：String，score：Number} –

如果你修复了错字，你的代码应该是wor ķ。 forEach应该是foreach和bind-data应该是data-bind（除非您将其设为自定义绑定）。看看下面的例子。当text是一个虚假值（null，空字符串）时，该节点将被隐藏，否则其值将可见。这也适用于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>

来源

2016-09-24 09:06:43 Tyblitz

哇。我现在很讨厌我的自我。非常感谢！ –

尝试修改此 data-bind="text: text, visible: text" 这个 data-bind="text: $data"

也可能改变这种 data-bind="forEach: comments" 这个 data-bind="forEach: comments()"

应该正确评价基础数组（allthough这应该是工作不就好了（））

来源

2016-09-23 20:48:00 MKougiouris

首先非常感谢回复！所以我已经将... =“text：text”更改为... =“text：$ data”，但是当我这样做时，它只是添加了经典[object Object]。如果我尝试...... =“text：$ data.text，它会再次抱怨它找不到该函数。有什么想法？ –

如果你能为我做一个小提琴，我可以给你一个适当的，工作的回应^^ – MKougiouris

这里是一个小提琴： https://jsfiddle.net/aL8ogr6b/1/ –

forEach with KnockoutJS中的对象属性

回答

相关问题