Все еще пытаюсь настроить плагин отображения нокаута точно. Я близок, но не могу получить ссылки на изображение из Json (google books api), чтобы отображать изображения. Не уверен, что я должен попытаться проникнуть в Json на HTML или перестроить отображаемые данные. Я был бы счастлив в любом случае. Заранее спасибо за вашу помощь.
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="/jquery-1.8.2.js"></script>
<script src="/jquery-ui.js"></script>
<script src="/knockout-2.2.0.js"></script>
<script src="/knockout.mapping-latest.js"></script>
<script src="/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");
});
});
Плагин сопоставления создает ваш viewmodel с той же структурой, что и ваш источник. Таким образом, вам нужно получить доступ к данным в вашей отображаемой модели просмотра, так как вы получите доступ к ней из источника.
В вашем источнике JSON свойство imageLinks
выглядит так:
Как вы видите, imageLinks
- это не массив, а объект ({}
вместо []
), поэтому вам не нужен ko foreach
вы можете просто написать:
<table>
<tbody>
<tr>
<td>
<img data-bind="attr: {src: volumeInfo.imageLinks.thumbnail}" />
</td>
</tr>
</tbody>
</table>
Демо JSFiddle.