Take the 2-minute tour ×

Is it possible to manually insert a computed observable into an array that is generated with the mapping plugin? Here is an example that does not use the mapping plugin, but I would like to know if it could use it.

Lets say I have JSON data from the server:


On my view I have an Order class and a view model:

function Order(order) {
  var self = this;
  self.OrderID = ko.observable(order.OrderID);
  self.FirstName = ko.observable(order.FirstName);
  self.LastName = ko.observable(order.LastName);

  /*This is what I want to insert after the mapping plugin 
  generates "orders on the ViewModel*/
  self.FullName = ko.computed(function () {
      return self.FirstName() + ' ' + self.LastName();


function ViewModel() {
  var self = this;
  self.orders = ko.observableArray([])

//Get orders
    url: '@Url.Action("orders")',
    type: "post",
    success: function (data) {
        var mappedOrders = $.map(data, function (item) { return new Order(item) });

Is it possible to use the mapping plugin to generate the orders array on the view model, and also be able to insert the computed observable "FullName" in the orders array?

share|improve this question
add comment

2 Answers

up vote 4 down vote accepted

You can, according to the documentation:

var mapping = {
    'children': {
        create: function(options) {
            return new myChildModel(options.data);

var myChildModel = function(data) {
    ko.mapping.fromJS(data, {}, this);

    this.nameLength = ko.computed(function() {
        return this.name().length;
    }, this);

var viewModel = ko.mapping.fromJS(data, mapping);
share|improve this answer
Thank you, this is helpful. But I only see from this how to make a computed observable from one property of the data (i.e. children -> nameLength). How it would be possible to make a computed observable from two or more properties? –  Bradley Trager Feb 28 '13 at 16:56
Sorry, I was out last night, so didn't see your follow-up question until now. Glad you got it sorted in the end. Technically, though, I'd say that I answered the question that you asked completely, so I'd have thought that an upvote was the least it deserved! –  Paul Manzotti Mar 1 '13 at 9:59
add comment

After considering the documentation, I successfully applied it to my example as demonstrated in this jsFiddle and in the following lines:

var data = [{
    OrderID: '1',
    FirstName: 'Bob',
    LastName: 'Stevens'
}, {
    OrderID: '2',
    FirstName: 'Jim',
    LastName: 'Johnson'


function order(data) {
    var self = this;
    var model = ko.mapping.fromJS(data, {}, self);
    model.FullName = ko.computed(function () {
        return self.FirstName() + ' ' + self.LastName();
    return model;

var mapping = {
    create: function (options) {
        return new order(options.data);

function viewModel() {
    var self = this;
    self.orders = ko.mapping.fromJS(data, mapping);

var vm = new viewModel();

share|improve this answer
the bomb answer!! –  Brian Ogden May 16 at 1:13
add comment

Your Answer


