JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

<fieldset>
    <div data-bind="foreach: {data: Bows, as: 'bow'}">
        <label>Type:</label>
        <label data-bind="text: bow.BowType().Description"></label>
        <br/>
        <select data-bind="foreach: {data: $root.BowTypes, as: 'availableBow'}, value: bow.BowType">
            <option data-bind="text: availableBow.BowType.Description, value: availableBow.BowType"></option>
        </select>
        <button data-bind="click: function(){console.log(ko.toJSON(bow))}">console.log() this bow?</button>
        <div>
            <label data-bind="text: bow.BowID"></label>
        </div>
    </div>
</fieldset>

JavaScript

var CommonModel = function (data) {
    var self = this;
    self.Description = data.Description;
    self.BowTypeID = data.BowTypeID;
    return self;
}

var BowRepository = function () {

    var self = this;
    self.repo = {}
    self.addBow = function (commonModel) {
        var id = commonModel.BowTypeID();
        if (!self.repo[id]) {
            self.repo[id] = new CommonModel(commonModel)
        }
    };
    self.getBow = function (commonModel) {

        var id = commonModel.BowTypeID();

        if (!self.repo[id]) { 
            self.addBow(commonModel);
        }

        return self.repo[id];
    }
}

var repo = new BowRepository();
 
var MyBowsModel = {

    BowTypes: ko.observableArray([{
        BowType: repo.getBow({
            Description: ko.observable('Compound'),
            BowTypeID: ko.observable('c0b0e507-70b7-43d5-8574-7d6a0103ba27')
        }),
        DefaultBow: ko.observable(false)
    }, {
        BowType: repo.getBow({
            Description: ko.observable('Recurve'),
            BowTypeID: ko.observable('5b9693dc-dccd-40bc-aea8-02b9f7e0a926')
        }),
        DefaultBow: ko.observable(true)
    }]),
    Bows: ko.observableArray([

    {
        BowID: ko.observable('RECURVE-START-TEST-92cd-9ab14188f046'),

        BowType: ko.observable(repo.getBow({
            Description: ko.observable('Recurve'),
            BowTypeID: ko.observable('5b9693dc-dccd-40bc-aea8-02b9f7e0a926')
        })),

        CreatedDate: ko.observable('05/01/2013 15:00'),
        Name: ko.observable('My favourite Bow')
    }, {
        BowID: ko.observable('COMPOUND-START-TEST-92cd-9ab14188f046'),

        BowType: ko.observable(repo.getBow({
            Description: ko.observable('Compound'),
            BowTypeID: ko.observable('c0b0e507-70b7-43d5-8574-7d6a0103ba27')
        })),


        CreatedDate: ko.observable('05/01/2013 15:00'),
        Name: ko.observable('My less than favourite Bow')
    }]), //A couple of function stubs
    Save:...