Question

我找到了一些关于此的答案，但未能将事情放在一起。使用Knockout的第一天，如果我认为它完全错误，请告诉我！

我想代表我的评论列表。注释包含多个属性，例如{text：...，score：...，...}

我知道我有一个视图模型

＆＃13;

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

＆＃13;

我知道forEach看起来有点像这样：

in jade（我正在使用：

＆＃13;

#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")

＆＃13;

翻译为html：

＆＃13;

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

＆＃13;

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

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是一个假值（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>

forEach在KnockoutJS中使用对象属性

2 个答案: