JSFiddle - React, Tailwind, and code Playground
HTML
<input data-bind="value: value" />
<input data-bind="value: value2"/>
<span id="isValid"></span>
JavaScript
var viewmodel = {
value: ko.observable(0),
value2: ko.observable(0)
};
viewmodel.isGreaterThanFive = ko.computed({
read: function() {
return viewmodel.value() > viewmodel.value2();
},
});
viewmodel.sayHelloIfValid = function() {
if(viewmodel.isGreaterThanFive()) {
document.querySelector('#isValid').innerText = 'is greater than five';
} else {
document.querySelector('#isValid').innerText = 'is less than/equal to five';
}
};
viewmodel.value.subscribe(viewmodel.sayHelloIfValid.bind(viewmodel));
ko.applyBindings(viewmodel);