JSFiddle - React, Tailwind, and code Playground

by Alan Garrod

HTML

<input data-bind="value:a"></input>
<b data-bind="text:a"></b>

<select data-bind="options: b, optionsText : 'name', value:v"></select>
<div> <span data-bind="text : v().val"></span>
 <span data-bind="text : v().name"></span>
 <span data-bind="text : v().other"></span>

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

<ol data-bind="foreach: c">
    
    <li>
        <input data-bind="value: a"></input>
    </li>
</ol>
<ol data-bind="foreach: c">
    <li> <span data-bind="text : a"></span>

    </li>
</ol>
<button onclick="testModel.c.push(new Ho('YAY'));">Add Item</button>
<p>Enter bid price: <input data-bind="value: formattedPrice"/></p>

JavaScript

var Hooo = function (nam, val, oth) {

    this.name = nam;
    this.val = val;
    this.other = oth;
};
Ho = function (val) {

    this.a = ko.observable(val);
};

function myModel(val) {

    this.price = ko.observable(25.99);
 
    this.formattedPrice = ko.computed({
        read: function () {
            return '$' + this.price().toFixed(2);
        },
        write: function (value) {
            // Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable
            value = parseFloat(value.replace(/[^\.\d]/g, ""));
            this.price(isNaN(value) ? 0 : value); // Write to underlying storage
        },
        owner: this
    });

    var self = this;
    self.a = ko.observable(val);
    self.b = ko.observableArray([
    new Hooo('Hi', 1, 121),
    new Hooo('Ho', 2, 21),
    new Hooo('Hoo', 3, 232)]);
    self.c = ko.observableArray([
    new Ho("Yee"),
    new Ho("Yoo"),
    new Ho("YA")]);
    self.v = ko.observable();
};
testModel = new myModel(1000);
ko.applyBindings(testModel);