What am I doing wrong here returning viewmodel?

Question

I am trying to convert this to durandal/hottowel.

viewModel:

define(['plugins/router', 'knockout', 'services/logger', 'durandal/app', 'mapping', 'services/routeconfig', 'services/dataBindingHandlers', 'services/appsecurity'], function (router, ko, logger, app, mapping, routeconfig, dataBindingHandlers, appsecurity) {
    function activate() {
        logger.log(viewModel.title + "'s  View Activated", null, viewModel.title, true);
        return true;
    }

    var viewModel = {
        activate: active,
        title: 'Overview',
        query: ko.observable('')
    };

    var url = "https://www.googleapis.com/books/v1/volumes?q=the+Cat+In+The+Hat", path = $.getJSON(url);

    path.then(function (data) {
        var books = data.items;
        console.log(books);
        viewModel.model = mapping.fromJS(data.items);
        viewModel.books = ko.computed(function () {
            var search = this.query().toLowerCase();
            return ko.utils.arrayFilter(this.model(), function (book) {
                return book.id().toLowerCase().indexOf(search) >= 0 || book.kind().toLowerCase().indexOf(search) >= 0 || book.etag().toLowerCase().indexOf(search) >= 0
            });
        }, viewModel);
        return viewModel;
    });

});

View:

<section>
    <h2 class="page-title" data-bind="text: title"></h2>
    <header>
        <form action="#">
            <input class=search-query placeholder="Search…" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off" speech x-webkit-speech>
        </form>
    </header>
    <div class="content">
        <ul data-bind="foreach:books">
            <li>
                <strong data-bind="text: id"></strong> –
                <span data-bind="text: kind"></span> –
                <span data-bind="text: etag"></span> -
                <p data-bind="text: volumeInfo.description"></p>
            </li>
        </ul>
    </div>
</section>

There are no error in the console and nothing is displaying on screen, it is just loading

Answer 1

Move the code to the activate function:

define(['plugins/router', 'knockout', 'services/logger', 'durandal/app', 'mapping', 'services/routeconfig', 'services/dataBindingHandlers', 'services/appsecurity'], function (router, ko, logger, app, mapping, routeconfig, dataBindingHandlers, appsecurity) {
    function activate() {
        logger.log(viewmodel.title + "'s  View Activated", null, viewmodel.title, true);
        var url = "https://www.googleapis.com/books/v1/volumes?q=the+Cat+In+The+Hat", 
        path = $.getJSON(url);
        return path.then(function (data) {
        var books = data.items;
        console.log(books);
        viewModel.model = mapping.fromJS(data.items);
        viewModel.books = ko.computed(function () {
            var search = this.query().toLowerCase();
            return ko.utils.arrayFilter(this.model(), function (book) {
                return book.id().toLowerCase().indexOf(search) >= 0 || book.kind().toLowerCase().indexOf(search) >= 0 || book.etag().toLowerCase().indexOf(search) >= 0
            });
        }, viewModel);
    };

    var viewModel = {
        activate: active,
        title: 'Overview',
        query: ko.observable('')
    };
        return viewModel;
    });

});

In the view, update foreach:filteredItems to: foreach:books

Answer 2

define(['plugins/router', 'knockout', 'services/logger', 'durandal/app', 'mapping', 'services/routeconfig', 'services/dataBindingHandlers', 'services/appsecurity'], function (router, ko, logger, app, mapping, routeconfig, dataBindingHandlers, appsecurity) {
    function activate() {
        logger.log(viewModel.title + "'s  View Activated", null, viewModel.title, true);
        return true;
    }

    var viewModel = {
        activate: activate,
        title: 'Overview',
        query: ko.observable(''),
        model: ko.observableArray()
    };

    viewModel.books = ko.computed(function () {
        var search = this.query().toLowerCase();
        return ko.utils.arrayFilter(this.model(), function (book) {
            return book.id().toLowerCase().indexOf(search) >= 0 || book.kind().toLowerCase().indexOf(search) >= 0 || book.etag().toLowerCase().indexOf(search) >= 0;
        });
    }, viewModel);

    var url = "https://www.googleapis.com/books/v1/volumes?q=the+Cat+In+The+Hat", path = $.getJSON(url);

    path.then(function (data) {
        var books = data.items;
        console.log(books);
        viewModel.model(mapping.fromJS(books)());
    });

    return viewModel;
});