敲除映射读取 JSON答案

【问题标题】：Knockout Mapping reading JSON敲除映射读取 JSON
【发布时间】：2013-09-22 16:12:51
【问题描述】：

刚从 KnockOut Mapping 开始读取一些 JSON（使用 Google Books API），但似乎无法让它工作。没有错误报告，但没有显示任何内容。可能是我忽略的一个简单问题，但感谢您的评论。

标记....

<body>
<h2>Find Cat in the Hat</h2>
   <div>
        <input id="booksearch" />
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <th>Volumes</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: model.items">
                <tr>
                    <td data-bind="text: model.id"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <input id="btnTest" type="button" value="button" />
</body>
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="/Scripts/knockout-2.2.0.js"></script>
<script src="/Scripts/knockout.mapping-latest.js"></script>

jQuery....

$(document).ready(function () {
    //Knockout Test

    $('#btnTest').click(function () {
        var url = "https://www.googleapis.com/books/v1/volumes?q=the+Cat+In+The+Hat";

        var viewModel = {};
        $.getJSON(url, function (data) {
            viewModel.model = ko.mapping.fromJSON(data);
            ko.applyBindings(viewModel);

        });
    });
});

【问题讨论】：

你能制作一个 jsFiddle 来重现你的问题吗？

标签： json jquery-plugins knockout.js getjson knockout-mapping-plugin

【解决方案1】：

在$.getJSON success callback 中，您将返回一个 JavaScript 对象而不是 JSON 字符串：

成功回调传递返回的数据，通常是由 JSON 结构定义并解析的 JavaScript 对象或数组使用 $.parseJSON() 方法。它还传递了文本状态回应

所以你需要使用ko.mapping.fromJS(data);方法而不是ko.mapping.fromJSON(data);

您的固定代码应如下所示：

$.getJSON(url, function (data) {
    viewModel.model = ko.mapping.fromJS(data);
    ko.applyBindings(viewModel);
});

您认为还有另一个问题：data-bind="text: model.id" 应该是 data-bind="text: id" 你不需要那里的model 因为在foreach 内你是在model.items 的上下文中：

<tbody data-bind="foreach: model.items">
    <tr>
        <td data-bind="text: id"></td>
    </tr>
</tbody>

演示JSFiddle.

【讨论】：

@nemesv 您是否考虑过查询多个搜索？否，错误：未捕获错误：您不能将绑定多次应用于同一元素。
@ProllyGeek 我从来没有考虑过多次搜索，最初的问题是关于如何使用映射插件正确解析响应，我从来没有想过你不能执行两次搜索（无论如何演示中的搜索只返回一个修复列表，并没有实际工作）。当然，ko.applyBindings 必须被调用一次并且对代码进行一些重组（将ko.applyBindings 移动到准备好的 DOM 并使用映射插件略有不同）它可以工作：jsfiddle.net/mqna9nxg
@nemesv 您是否尝试过对您的示例进行多次搜索？