Edit in JSFiddle

$(document).ready(function () {
    function resultItem(title, link, description, image) {
        var self = this;
        self.title = ko.observable(title);
        self.link = ko.observable(link);
        self.description = ko.observable(description);
        self.image= ko.observable(image);
    }

    function viewModel() {
        var self = this;

        self.searchInput = ko.observable("G.R.R. Martin");
        self.items = ko.observableArray();

        self.mapResults = function (data) {
        	console.log(data);
            _.each(data.items, function (item) {
                var resultI = new resultItem(item.volumeInfo.title,
                                             item.volumeInfo.canonicalVolumeLink,
                                             item.volumeInfo.description,
                                             item.volumeInfo.imageLinks.thumbnail
                                             );
                self.items.push(resultI); // add to our observable array
            });            
        };

        self.search = function () {
            self.items.removeAll();
            var url = "https://www.googleapis.com/books/v1/volumes?q=" + self.searchInput();
            $.ajax({
                url: url,
                type: "GET",
                success: function (data) {
                    self.mapResults(data);
                }
            });
        };
    }

    var vm = new viewModel();
    ko.applyBindings(vm);
});

<div id="container">
    <div>
        <input id="txtSearch" type="text" data-bind="value:searchInput" />
        <input id="btnSearch" type="button" data-bind="click:search" value="Search Books" />
    </div>
    <ul data-bind="foreach:items">
        <li><img data-bind="attr: { src: image}"/>
            <a data-bind="attr: { href: link, title: description}, text: title"></a>
            <br/><span data-bind="text:description" />
        </li>
    </ul>
</div>