JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://andersmalmgren.github.io/Knockout.Concurrency/src/knockout.concurrency.js"></script>
<div><input data-bind="value: name"</input></div>
<div data-bind="foreach: children">
<div><input data-bind="value: name"></input></div>
</div>
<button data-bind="disable: hasConflicts">Save</button>
<button data-bind="click: resolve, visible: hasConflicts">Resolve conflicts</button>
<button data-bind="click: getData">Simulate new save event from backend</button>
CSS
span.concurrency
{
background: no-repeat url(https://github.com/AndersMalmgren/Knockout.Concurrency/raw/master/Knockout.Concurrency.Demo/Content/images/icons/warning-16.png);
padding: 2px 0 2px 16px
}
span.concurrency button
{
width: 16px;
height: 16px;
border: none;
background: transparent;
margin-left: 2px;
cursor: pointer;
}
span.concurrency button.take-local {
background-image: url(https://github.com/AndersMalmgren/Knockout.Concurrency/raw/master/Knockout.Concurrency.Demo/Content/images/icons/resolve-16.png)
}
span.concurrency button.take-server {
background-image: url(https://github.com/AndersMalmgren/Knockout.Concurrency/raw/master/Knockout.Concurrency.Demo/Content/images/icons/merge-16.png)
}
JavaScript
ViewModel = function() {
this.name = ko.observable("John").extend({ concurrency: true});
this.children = [{ name: ko.observable("Jane").extend({concurrency: true })}, { name: ko.observable("Bruce").extend({concurrency: true })}];
this.concurrencyRunner = new ko.concurrency.Runner(this);
this.hasConflicts = ko.computed(function() {
return this.concurrencyConflicts().length > 0;
}, this);
this.resolve = function() {
this.concurrencyRunner.takeServer();
},
this.getData = function() {
//Simulate backend data
var data = { name: "John Doe", children: [{ name: "Jane Doe"},{ name: "Bruce Wayne"}]};
this.concurrencyRunner.run(this, data);
}
}
ko.applyBindings(new ViewModel());