Question

创建了一个解决问题的JSBin：http://jsbin.com/kukehoj/1/edit?html,js,console,output

我正在创建我的第一个支持REST的网站。后端是Python（Django REST框架），似乎工作正常。我试图让前端获得帖子的评论，但它不起作用。

HTML Imports

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>

scripts.js中

function Comment(data) {
    this.body = ko.observable(data.responseText)
}

function Post(data) {
    this.title = ko.observable(data.title)
    this.body = ko.observable(data.body)

    var self = this;
    self.comments = ko.observableArray([])  

    self.comments(($.map(data.comments, function(link) { // Map the data from
        return $.getJSON(link, function(data) { return new Comment(data)}) //These requests
    })))
}


function PostViewModel() {
    // Data
    var self = this;
    self.posts = ko.observableArray([])  

    // Get the posts and map them to a mappedData array. 

    $.getJSON("/router/post/?format=json", function(allData) {
        var mappedData = $.map(allData, function(data) { return new Post(data)})
        self.posts(mappedData)
    })
}


ko.applyBindings(new PostViewModel());

服务器数据：

[{  "title":"-->Title here<--",
    "body":"-->Body here<--",
    "comments":[
        "http://127.0.0.1:8000/router/comment/6/?format=json",
        "http://127.0.0.1:8000/router/comment/7/?format=json",
        "http://127.0.0.1:8000/router/comment/8/?format=json",
        "http://127.0.0.1:8000/router/comment/9/?format=json"]
}]

每个链接都出现在：

{"body":"-->Body here<--"}

的index.html

<div class="col-lg-7" data-bind="foreach: { data: posts, as: 'posts' }">

    <h3 data-bind="text: title"></h3> 
    <p data-bind="text: body"> </p>

    <span data-bind="foreach: { data: comments(), as: 'comments' }"> 
         <p data-bind="text: comments.body"></p>
    </span>

</div>

（还有更多HTML，但我删除了不相关的部分）

一切正常，但评论似乎是错误的格式。

Chrome控制台显示JSON＆＃34; responseText＆＃34;绑定到每个评论对象值。

Wrong format

对不起，如果这是一个愚蠢的问题，但我已经尝试了一切 - 但它不起作用。（我是一个菜鸟）

Answer 1

我假设您使用的是Django Rest Framework，因此您的帖子获得的JSON结构由序列化程序根据您的模型字段自动完成。

回到前端，我之前没有使用过淘汰赛js，但你需要的是使用另一个控制器加载评论。您可以使用主资源提供的链接逐个执行此操作（这有时会导致大量查询），或者您在注释端点上创建一个过滤器，以便您检索特定帖子的注释。

Answer 2

您提供的示例代码没有任何问题，只有当您的数据在示例this.body = ko.observable(data.responseText)对象中不包含responseText时，您拥有commentData部分。如果您将commentData对象替换为var commentData = {"responseText":"-->Body here<--"}则可行。

注意：这部分

 <span data-bind="foreach: { data: comments(), as: 'comments' }"> 
         <p data-bind="text: comments.body"></p> // comments.body => body
    </span>

你的问题是错的，但是你的示例代码是正确的。它应该是

 <span data-bind="foreach: { data: comments(), as: 'comments' }"> 
         <p data-bind="text: body"></p>
    </span>

以下是您的示例的工作版本：https://jsfiddle.net/rnhkv840/26/

Answer 3

曾经考虑过使用django REST框架吗？它可以帮助您使用简单的视图集序列化所有模型。查看docs.

Answer 4

因此找到了实际问题。 JavaScript从服务器读取数据的方式，因为注释只有一个值，注释的data属性是存储注释主体的变量。不是data.body。

KO：解析JSON时出错

4 个答案: