Question

我有一个Web API，它以JSON格式成功返回一系列博客文章：

[{"ID":1,"Title":"First Blog Post","Body":"Some Content"},{"ID":2,"Title":"Second BlogPost","Body":"Some other content"}]

出于练习目的，我想使用Knockout.js显示列表中的所有帖子。

这是我的代码：

<script>
$(document).ready(function () {

    function AppViewModel() {
        var self = this;

        self.posts = ko.observableArray([
        { Title: 'Default Title', Body: 'Default Body' },
        ]);

        $.getJSON('api/posts', function (data) {
            ko.mapping.fromJSON(data, {}, self.posts);
        });

    }

    ko.applyBindings(new AppViewModel());

});

我的绑定：

<tbody data-bind="foreach: posts">
                <tr>
                    <td data-bind="text: Title"></td>
                    <td data-bind="text: Body"></td>
                </tr>
</tbody>

我的表显示为空，由于某种原因它没有显示JSON数据......

答案：我不得不从jSON更改为fromJS并且它有效！非常感谢大家的帮助

Answer 1

返回的json具有标题大小写属性名称，但self.posts中的原始属性具有小写属性名称。我假设您绑定到模板中的小写版本。考虑将json也改为小写。

Answer 2

在您的情况下，您需要指定映射的更新目标。

来自Knockout Mapping plugin documentation：

如果像上面的示例一样，您正在执行内部映射在类中，您希望将此作为映射的目标操作。 ko.mapping.fromJS的第三个参数表示目标。例如，

ko.mapping.fromJS(data, {}, someObject);

所以在你的情况下：

$.getJSON('api/posts', function (data) {
        ko.mapping.fromJSON(data, {}, self.posts);
    });

工作JSFiddle

另请注意，属性名称区分大小写，它们应匹配JSON以及viewmodel和bindings。例如，您正在审核"Title"，但您正在使用title

使用Knockout.js的Web API - 为什么这不起作用？

2 个答案: