JSFiddle - React, Tailwind, and code Playground

by dru_zod

HTML

a<input type="checkbox" data-bind="checked: a" /><br>
b<input type="checkbox" data-bind="checked: b" /><br>
c<input type="checkbox" data-bind="checked: c" /><br>
data: <span data-bind="text: data"></span><br>

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

JavaScript

var model = {
    a: ko.observable(false),
    b: ko.observable(false),
    c: ko.observable(false),
    data: ko.observable(''),
    isValid: function () {
        return this.a() && this.b() && this.c();
    }
};

model.allTrue = ko.computed(function () {
    return this.a() && this.b() && this.c();
}, model);

model.query = ko.computed(function () {
    return 'a = ' + this.a() + '; b = ' + this.b() + '; c = ' + this.c() + ';';
}, model);

model.query.subscribe(function () {
    if (!this.allTrue()) {
        this.data('no value'); 
        return;
    }
    // load some data...
    this.data(this.query());    
}, model);

ko.applyBindings(model);