Search code examples
visual-studio-2012knockout.jsknockout-mapping-pluginhottowel

How to use Knockout Mapping plugin in Hottowel


i was able to install ko.mapping in VisualStudio but when i try to map some Json Data in my view it does not work. can anyone tell me what i am doing wrong ?

here is my viewmodel

define(['plugins/router', 'knockout', 'services/logger', 'durandal/app', 'mapping'], function (router, ko, logger, app, mapping) {

    //#region Internal Methods
    function activate() {
        logger.log('Google Books View Activated', null, 'books', true);
        return true;
    }
    //#endregion
    //==jquery=================================================
    function attached() {


    }//-->end of viewAttached() 

    //========VIEWMODEL========================================
    var ViewModel = function (data) {
        activate = activate;
        attached = attached;
        title = 'google Books';

    };

    return new ViewModel();

});

and here ist an working example in Jsfiddle


Solution

  • I don't think that you don't need to return a new View Model. you just need to return the view model.

    define(['plugins/router', 'knockout', 'services/logger', 'durandal/app', 'mapping'],
      function (router, ko, logger, app, mapping) {
        var books = ko.observableArray();
        function activate() {
          getBooks().then(function(){
            logger.log('Google Books View Activated', null, 'books', true);
            return true;
          });
        }
        function attached() {
        }
        function getBooks(){
          $.getJSON(url, function (data) {
            vm.books(ko.mapping.fromJS(data));
            return true;
          });
        }
    
        var vm = {
          activate : activate,
          attached : attached,
          title : 'google Books',
          books: books
        };
    
        return vm;
    });
    

    EDIT
    To find requirejs errors add to your main.js file. It should help in tracking down requirejs module loading errors.

    requirejs.onError = function (err) {
        console.log(err.requireType);
        if (err.requireType === 'timeout') {
            console.log('modules: ' + err.requireModules);
        }
    
        throw err;
    };