JSFiddle - React, Tailwind, and code Playground

by Antonin Loury

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-bind="foreach: root"> <span data-bind="text: firstName"></span>
    <br>
    <input data-bind="value: age"></input>
    <br>
    <select data-bind="options: possiblefriends, optionsText: 'name', optionsValue: 'id', value: friends"></select>
</div>

JavaScript

var model = {
    firstName: "juls",
    age: 20,
    friends: [],
    possiblefriends: [{
        name: "john",
        id: "1"
    }, {
        name: "alfred",
        id: "2"
    }, {
        name: "bob",
        id: "3"
    }]
};

function ViewModel() {
    var self = this;
    this.root = ko.observableArray([]);
    this.load = function () {
        self.root.push(ko.mapping.fromJS(model));
        console.log(ko.mapping.toJS(self));
    };
}
$(function () {
    var vm = new ViewModel();
    ko.applyBindings(vm);
    vm.load();
});