ko mapping bug: array mappedProperties

mapped array getting corrupt because mappedProperties getting corrupt

by arhari

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.js"></script>
<span>Text:</span><input type="text" data-bind="value: data.text" />
<span data-bind="text: data.text"></span><br />
<ul data-bind="foreach: data.arr">
    <li><span data-bind="text: key"></span>:
        <span data-bind="text: value"></span></li>
</ul>

<button data-bind="click: add">Add</button>
<button data-bind="click: reload">Reload</button><br />
<span data-bind="text: json"></span>

JavaScript

(function($){
    var initData = {text: 'Some Text', 
                    arr: [{key: 1, value: 'a'}, 
                          {key: 2, value: 'b'}]};

    var viewModel = function (data) {
        var self = this;
        this.data = ko.mapping.fromJS(data);
        this.json = ko.computed(function() {
            return ko.mapping.toJSON(self.data);
        }).extend({ throttle: 1 });
        this.load = function() {
            ko.mapping.fromJS(initData, {}, self.data);
        };                         
        this.add = function() {
            self.data.arr.push({key:  ko.observable(self.data.arr().length+1), value: ko.observable('dd')});
        };                         
        this.reload= function() {
            ko.mapping.fromJS(ko.mapping.toJS(self.data), {}, self.data);
        };
    };
    ko.applyBindings(new viewModel(initData));
})(jQuery);