JSFiddle - React, Tailwind, and code Playground

by andrew rowe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<div id="selected-method-summary">
    <span class="method-name" data-bind="text: selectedMethod.name"></span>
    <span class="method-timerange" data-bind="text: selectedMethod.timerange"></span>
    <span class="method-price" data-bind="text: selectedMethod.price"></span>
</div>

<div id="methods">
    <input type="radio" class="radio" value="method1" data-name="method 01" data-timerange="8:00 - 10:00" data-price="9,99€" data-bind="checked: element.isSelected">
    <input type="radio" class="radio" value="method1" data-name="method 02" data-timerange="10:00 - 12:00" data-price="9,99€" data-bind="checked: element.isSelected">
    <input type="radio" class="radio" value="method3" data-name="method 03" data-timerange="12:00 - 14:00" data-price="9,99€" data-bind="checked: element.isSelected">
</div>

JavaScript

class Quote {
  constructor(data) {
    this.shippingMethod = ko.observable(data)
  	this.isSelected = ko.observable(data.selected);
  this.name = ko.observable(data.name);
  this.price = ko.observable(data.price);
  }
}

class ViewModel {
  constructor(data) {
    this.selectedMethod = ko.observable(new Quote({
      name: 'name',
      timerange: '2023-2024',
      price: 100.23
    }));
    this.quote = ko.observable(new Quote({
      carrier_code: 'ABC',
      method_code: '123'
    }));

    this.isSelected = ko.computed(() => {
      return this.quote().shippingMethod() ?
        this.quote().shippingMethod()['carrier_code'] + '_' + this.quote().shippingMethod()['method_code'] :
        null;
    });
    
    this.elements = ko.observableArray()
    
    
    
    ko.applyBindings(this);
  }
}

document.addEventListener('DOMContentLoaded', () => {
  console.log('ready');
  new ViewModel()
})