剔除映射到 Json 中的图像（链接）答案

【问题标题】：Knockout Mapping to image (links) in Json剔除映射到 Json 中的图像（链接）
【发布时间】：2013-10-01 19:30:15
【问题描述】：

仍在尝试微调 Knockout 映射插件。我很接近，但无法从 Json（谷歌图书 api）获取图像链接来显示图像。不确定我是否应该尝试深入了解 HTML 上的 Json 或重组映射数据。无论哪种方式我都会很高兴。提前感谢您的帮助。

HTML...

<body>
    <h2>Find Cat in the Hat</h2>
       <div>
            <input id="booksearch" /><input id="btnTest" type="button" value="button" />
        </div>
        <div>
            <table id="bookresults">
                <thead>

                   <tr>
                        <th colspan="6">Books</th>

                    </tr>
                </thead>
                <tbody data-bind="foreach: model.items">
                    <tr>
                        <td><input type="button" title="Select" value="Select" /></td>
                        <td data-bind="text: volumeInfo.title"></td>
                        <td data-bind="text: volumeInfo.description"></td>
                        <td><table><tbody><!-- ko foreach: volumeInfo.industryIdentifiers --><tr><td data-bind="text: identifier"></td></tr><!-- /ko --></tbody></table></td>
                        <td><table><tbody><!-- ko foreach: volumeInfo.categories --><tr><td data-bind="text: $data"></td></tr><!-- /ko --></tbody></table></td>
                        <td><table><tbody><!-- ko foreach: items.volumeInfo --><tr><td><img data-bind="attr: {src: imageLinks.thumbnail}" /></td></tr><!-- /ko --></tbody></table></td>

                    </tr>

                    <tr>
                    </tr>

                </tbody>
            </table>
        </div>
    <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>
    <script src="/Scripts/ireadabook.js"></script>

</body>

js 文件....

$(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.fromJS(data);
            ko.applyBindings(viewModel);

        });

        //Show the results after selected
        $('#bookresults').css("display", "block");

    });

});

【问题讨论】：

抱歉，我看不出问题出在哪里......或者至少是什么不工作？您是否尝试根据您获得的链接显示图像？或者您是否尝试显示来自 src 的图像？请详细说明您的问题

标签： jquery json html knockout.js knockout-mapping-plugin

【解决方案1】：

映射插件使用与源相同的结构创建您的视图模型。因此，您需要像从源访问数据一样访问映射视图模型中的数据。

在您的源 JSON 中，imageLinks 属性如下所示：

如您所见，imageLinks 不是一个数组，而是一个对象（{} 而不是[]），所以您不需要ko foreach，您可以直接写：

<table>
     <tbody>
         <tr>
             <td>
                 <img data-bind="attr: {src: volumeInfo.imageLinks.thumbnail}" />
             </td>
         </tr>
     </tbody>
</table>

演示JSFiddle.

【讨论】：

再次感谢 nemsev。你是一个 Knockout Mapping 忍者。