Knockoutjs throws "Unknown template value" when using knockout.mapping

I am trying to use Knockout.mapping to make it easier to bind JSON objects. I am using requirejs to load a library in my code, but whenever I do this I get this error:

Error: Album Info Component: Unknown Template Value: [Object Object]

This is the content of the component:

define(['knockout', 'knockout-mapping', 'text!./album-details.html'], function (ko, templateMarkup) {
    function AlbumDetails(params) {

        var self = this;
        self.album = {};

        $.getJSON('http://localhost:62755/api/album/' + self.id, function (r) {
            ko.mapping.fromJS(r, self.album);
        });        
  }

  // This runs when the component is torn down. Put here any logic necessary to clean up,
  // for example cancelling setTimeouts or disposing Knockout subscriptions/computeds.
  AlbumDetails.prototype.dispose = function() { };

  return { viewModel: AlbumDetails, template: templateMarkup };

});

      

And this is my require.config.js

// require.js looks for the following global when initializing
var require = {
    baseUrl: ".",
    paths: {
        "bootstrap":            "bower_modules/components-bootstrap/js/bootstrap.min",
        "crossroads":           "bower_modules/crossroads/dist/crossroads.min",
        "hasher":               "bower_modules/hasher/dist/js/hasher.min",
        "jquery":               "bower_modules/jquery/dist/jquery",
        "knockout":             "bower_modules/knockout/dist/knockout",
        "knockout-projections": "bower_modules/knockout-projections/dist/knockout-projections",
        "knockout-mapping":     "bower_modules/knockout-mapping/knockout.mapping",
        "signals":              "bower_modules/js-signals/dist/signals.min",
        "text":                 "bower_modules/requirejs-text/text"
    },
    shim: {
        "bootstrap": { deps: ["jquery"] },
        "knockout-mapping": {deps: ["knockout"] }
    }
};

      

And this is an example JSON response:

{
    "$id" : "1",
    "id" : 14,
    "name" : "Bound to pretend",
    "artist" : {
        "$id" : "2",
        "id" : 12,
        "name" : "Velvet Veins",
        "musicBrainzId" : "f7a48e35-7891-4277-bf19-a1ebeeffea33"
    },
    "releaseDate" : "2014-01-01T00:00:00Z",
    "lastFetchDate" : "2015-04-27T13:31:41Z",
    "musicBrainzReleaseId" : "ea25f9f1-1f26-473d-b084-cf961ef126cf",
    "tracks" : {
        "$id" : "3",
        "$values" : [{
                "$id" : "4",
                "id" : 173,
                "position" : 1,
                "name" : "Boud to pretend"
            }, {
                "$id" : "5",
                "id" : 174,
                "position" : 2,
                "name" : "Arizona ghost"
            }, {
                "$id" : "6",
                "id" : 175,
                "position" : 3,
                "name" : "Sweet heat"
            }, {
                "$id" : "7",
                "id" : 176,
                "position" : 4,
                "name" : "Opal"
            }, {
                "$id" : "8",
                "id" : 177,
                "position" : 5,
                "name" : "Nation sack"
            }, {
                "$id" : "9",
                "id" : 178,
                "position" : 6,
                "name" : "Reptiles of the shore"
            }
        ]
    }
}

      

I used yoman for scalfold and bower to install libraries. I'm not sure how to fix this problem as the error describes [object Object]. It is not easy for me to understand what is the cause of the error.

From the network trace I can see that the knockout.mapping.js is being fetched by the browser, but the ajax API request is not.

How can I fix this problem? Is there something clearly wrong in my code?

+3


source to share


1 answer


You are not including the display plugin correctly in the module declaration because you are missing a parameter for the mapping plugin. So it passes the display plugin itself into a parameter templateMarkup

, and KO will complain when it finds it in template: templateMarkup

.

To fix this you need to add an argument before templateMarkup

which will contain the mapping plugin

define(['knockout', 'knockout-mapping', 'text!./album-details.html'], 
    function (ko, mapping, templateMarkup)

      



Since you are using RequireJS, the mapping plugin is not available in the property ko.mapping

, but you need to use the second argument mapping

to access its functions.

So, you need to also change your code where you are doing the mapping:

$.getJSON('http://localhost:62755/api/album/' + self.id, function (r) {
    mapping.fromJS(r, self.album);
}); 

      

+2


source







All Articles