JSFiddle - React, Tailwind, and code Playground

by Adity Singh

HTML

<script src="http://coderenaissance.github.io/knockout.viewmodel/knockout.viewmodel.js"></script>
Me gusta:  <input data-bind="value: firstName" /><br/>
Mi animal favorito: <span data-bind="text: lastName"></span><br/>
Musica: <select data-bind="options: items, value: itemselected"> </select>
<h1 data-bind="text: all"></h1>

JavaScript

var model = {
    firstName: "Le gatĂŞau",
    lastName: "Chien",
    items: ['J-Rock', 'J-Pop'],
    itemselected: 'J-Pop'
};

var updatedModel = {
    firstName: "El pastel",
    lastName: "Perro",
    items: ['Pop', 'Rock'],
    itemselected: 'Rock'
};

var options = {
    extend: {
        "{root}": function(currentModel){
            currentModel.all = ko.computed(function(){
                return currentModel.firstName() + ', ' + currentModel.lastName() + ', ' + currentModel.itemselected();
            })
        }
    }
};

var viewModel = ko.viewmodel.fromModel(model, options);
ko.applyBindings(viewModel);

setTimeout(function () {
    console.clear();
    ko.viewmodel.updateFromModel(viewModel, updatedModel);
    console.log('cambiando modelo...');
    console.log('listo!!');
}, 2300);