knockoutjs mapping, add new item to child array without the extra mapping object

Question

Using this test code, based on my real project:

var test = ko.mapping.fromJS({ id: 1, kids: [{ name: "sue"}] });
test.kids.push({ name: "tim" });
test.kids.push(ko.mapping.fromJS({ name: "joe" }));
console.log(test);
console.log(test.kids()[0]);
console.log(test.kids()[1]);
console.log(test.kids()[2]);
test.kids()[2].__ko_mapping__ = undefined;
console.log(test.kids()[2]);

The console output in Firebug shows:

Object { __ko-mapping__={...}, id=d(), kids=d() }
Object { name=d() }
Object { name="tim" }
Object { __ko-mapping__={...}, name=d() }
Object { name=d() }

My goal is to add items to the kids array after the initial mapping of the data, and have those items look identical to the original items added. If I just push an object directly on the array, the properties are not observables. If I push the object using ko.mapping.fromJS they get an extra __ko_mapping__ object included. I'd rather not have the extra object, as it doesn't seem to be needed (original items don't have it and work fine), and I might use this same design in places where I am adding 1000s of items later.

Setting the object to undefined does seem to remove the extra object, but would rather not have it created in the first place if possible.

__ko_mapping__ is created and used by the mapping plug-in on the "root" element when ko.mapping.fromJS is called. You should not care about it and it is not configurable it is added automatically. If you fear of memory problems then you should create a constructor function for your items and use that instead of the mapping plug-in. — nemesv
– nemesv, Commented Apr 16, 2013 at 19:14
I agree to the comment above. ko_mapping is for knockout to track what was added. when you call ko.mapping.toJS() function, those extra properties will be removed, which is what you should call to get a clean object when you want to pass it back to the server. On the other hand, if you are iterating through the object's properties and you are worried that this might cause issues, then you should iterate and check hasOwnProperty to make sure you are iterating through the objects own properties. ko_mapping will not figure in that. — Sujesh Arukil
– Sujesh Arukil, Commented Apr 16, 2013 at 21:01
I guess so, but seems like a pretty common thing, that they would have a more optimized method for this. I'm just mapping a pretty basic object, and then wanting to add something to it later... shame I'd have to break away from the mapping library just to do this, or just "not worry" about the extra memory (maybe 5 times the size). — eselk
– eselk, Commented Apr 16, 2013 at 21:01
If the mapping info was there on items all the time, I'd be more likely to accept it as "required", but it isn't there for items that got mapped as children during the initial mapping. I guess there is probably a library function I could find in the source code that is being called on each child for the initial mapping, and call that directly... but not a good idea. — eselk
– eselk, Commented Apr 16, 2013 at 21:05

eselk · Accepted Answer · 2013-05-02 22:57:39Z

1

Based on lack of any other answers, and the only answer being one that is probably a better design practice but actually does the opposite of what I asked for (it adds a mapping object to every child).. I guess I already had the answer in my original question, just assumed there must be a better way.

So for future readers, here it is:

test.kids()[2].__ko_mapping__ = undefined;

Just set ko_mapping to undefined, if you want to get rid of it.

See the comments and other answer as to why this isn't a good idea in-general. For my needs, and maybe you have the same, it is a good idea.

answered May 2, 2013 at 22:57

eselk

6,9147 gold badges64 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pcw216 · Accepted Answer · 2013-04-30 13:58:22Z

I generally find it useful to create a strong prototype for 'Kids' and tell the mapping plugin to use it when mapping your initial data. This would cause the contents of the array to be identical and have the added benefit of permitting computeds and observables for each Kid.

http://jsfiddle.net/Z9GF5/

var Kid = function(json){
    ko.mapping.fromJS(json, {}, this);
}

var mapping = {
    'kids': {
        create: function(options) {
            return new Kid(options.data);
        }
    }
}

Now if you have to add items just create new Kids.

var test = ko.mapping.fromJS({ id: 1, kids: [{ name: "sue"}] }, mapping);
test.kids.push(new Kid({ name: "tim" }));
test.kids.push(new Kid({ name: "joe" }));
console.log(test);
console.log(test.kids()[0]);
console.log(test.kids()[1]);
console.log(test.kids()[2]);

Firebug then shows:

Object {id: function, kids: function, __ko_mapping__: Object}
Kid {name: function, __ko_mapping__: Object}
Kid {name: function, __ko_mapping__: Object}
Kid {name: function, __ko_mapping__: Object}

Guest · Accepted Answer · 2014-06-10 19:05:20Z

0

http://knockoutjs.com/documentation/plugins-mapping.html

You can choose which properties get mapped and how.

answered Jun 10, 2014 at 19:05

Guest

1

1 Comment

EWit Over a year ago

Please include relevant section in the answer itself instead of only linking to external sources.

Collectives™ on Stack Overflow

knockoutjs mapping, add new item to child array without the extra mapping object

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related