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?
source to share
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);
});
source to share