JSFiddle - React, Tailwind, and code Playground

by kyrisu

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.debug.js"></script>
DATA:
<ul data-bind="foreach: items">
<li data-bind="text: Name"></li>
</ul>

JavaScript

ko.observableArray.fn.pushAll = function(valuesToPush) {
    var underlyingArray = this();
    this.valueWillMutate();
    ko.utils.arrayPushAll(underlyingArray, valuesToPush);
    this.valueHasMutated();
    return this;
};
var data = [
{"Id":1,"Name":"Item1"},
{"Id":2,"Name":"Item2"},
{"Id":3,"Name":"Item3"}];

var data2 = [
{"Id":7,"Name":"Item7"},
{"Id":8,"Name":"Item8"},
{"Id":9,"Name":"Item9"}];

var mapping = {
        key: function (item) {
            return ko.utils.unwrapObservable(item.Id);
        }
    };

vm = {
    items: ko.observableArray([])
}


ko.applyBindings(vm);
var newdata = ko.mapping.fromJS(data2, mapping);
vm.items.pushAll(newdata);