javascript - 具有嵌套模型的 KnockoutJS

Question

我正在寻找一些有关如何创建代表我的评论系统中的帖子的模型的指南。本质上，它是 Facebook 的简化版本，其中有不同用户的帖子，每个帖子都有零个或多个评论。亲子关系始终只有一层。

创建 Post 对象没有问题，但我需要一些帮助来创建和绑定(bind)嵌套在帖子下面的评论。如果我有一个 Post 模型和一个 Comment 模型，如何将两者结合在一起？

我尝试了谷歌，但找不到关于嵌套模型数据绑定(bind)的好例子。

示例 JSON 让您更好地了解对象的外观:

`{
  "PostedBy": 1,
  "CommentedByFirstName": "John",
  "CommentedByLastName": "Smith",
  "CommentedByGravatar": "jsmith@gmail.com",
  "Category": "General",
  "CategoryColor": "0076c0",
  "Message": "This is a parent",
  "PostedDate": "2015-06-18T19:32:51.487",
  "PostId": 1008,
  "Anchor": {
    "AnchorId": 9,
    "DashboardId": "1da42665-1cf3-431c-924e-5ed0575315d7"
  },
  "PostComment": [
    {
      "CommentedBy": 1,
      "CommentedByFirstName": "John",
      "CommentedByLastName": "Smith",
      "CommentedByGravatar": "jsmith@gmail.com",
      "CommentedDate": "2015-06-23T20:28:10.887",
      "CommentId": 19,
      "Message": "test5",
      "PostId": 1008
    },
    {
      "CommentedBy": 1,
      "CommentedByFirstName": "John",
      "CommentedByLastName": "Smith",
      "CommentedByGravatar": "jsmith@gmail.com",
      "CommentedDate": "2015-06-18T20:54:33.533",
      "CommentId": 18,
      "Message": "test4",
      "PostId": 1008
    },
    {
      "CommentedBy": 1,
      "CommentedByFirstName": "John",
      "CommentedByLastName": "Smith",
      "CommentedByGravatar": "jsmith@gmail.com",
      "CommentedDate": "2015-06-18T20:54:30.75",
      "CommentId": 17,
      "Message": "test3",
      "PostId": 1008
    }
  ]
}`

Answer 1

If I have a Post model and a Comment model, how do I tie the two together?

您的 PostVM 将有一个 Comments 属性，它是 CommentVM 的数组。您可以使用简单的 foreach 绑定(bind)来绑定(bind)它。像这样的事情:

var post = {
  "PostedBy": 1,
  "CommentedByFirstName": "John",
  "CommentedByLastName": "Smith",
  "CommentedByGravatar": "jsmith@gmail.com",
  "Category": "General",
  "CategoryColor": "0076c0",
  "Message": "This is a parent",
  "PostedDate": "2015-06-18T19:32:51.487",
  "PostId": 1008,
  "Anchor": {
    "AnchorId": 9,
    "DashboardId": "1da42665-1cf3-431c-924e-5ed0575315d7"
  },
  "PostComment": [
    {
      "CommentedBy": 1,
      "CommentedByFirstName": "John",
      "CommentedByLastName": "Smith",
      "CommentedByGravatar": "jsmith@gmail.com",
      "CommentedDate": "2015-06-23T20:28:10.887",
      "CommentId": 19,
      "Message": "test5",
      "PostId": 1008
    },
    {
      "CommentedBy": 1,
      "CommentedByFirstName": "John",
      "CommentedByLastName": "Smith",
      "CommentedByGravatar": "jsmith@gmail.com",
      "CommentedDate": "2015-06-18T20:54:33.533",
      "CommentId": 18,
      "Message": "test4",
      "PostId": 1008
    },
    {
      "CommentedBy": 1,
      "CommentedByFirstName": "John",
      "CommentedByLastName": "Smith",
      "CommentedByGravatar": "jsmith@gmail.com",
      "CommentedDate": "2015-06-18T20:54:30.75",
      "CommentId": 17,
      "Message": "test3",
      "PostId": 1008
    }
  ]
};

function PostVM(postObj) {
    var self = this;
    self.message = postObj.Message;
    // ... other properties
    self.comments = postObj.PostComment.map(function(c) {
        return new CommentVM(c);
    });
};

function CommentVM(commentObj) {
    var self = this;
    self.message = commentObj.Message;
    // ... other properties
};

var vm = new PostVM(post);
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="text:message">
</div>
<hr/>
<ul data-bind="foreach:comments">
    <li data-bind="text:message"/>
</ul>

我在这里使用普通属性只是为了简单起见，但显然您可以将可观察对象(包括用于注释的可观察集合)用于任何应该可写或可更新的属性。

您还应该查看 mapping plugin只需一行，基本上就可以将整个 post 对象转换为具有可观察值的 View 模型。这可以为您节省大量手动映射属性的工作。