JSFiddle - React, Tailwind, and code Playground

by fastfasterfastest

HTML

<script src="https://knockoutjs.com/downloads/knockout-3.5.0.debug.js"></script>
<div data-bind="text: 'knockout version - ' + ko.version"></div>

<hr/>
<ul>
  <li><code>with:</code> binding
    <div data-bind="with: value">
      descendant nodes bound with
      <code data-bind="text:'typeof $data == ' + typeof $data"></code>
      <span data-bind="if: typeof $data !== 'function'">
        - <span style="color:red;">NOT</span> expected
      </span>
    </div>
  </li>
  <!-- ko if: !!ko.bindingHandlers['using'] -->
  <li><code>using:</code> binding
    <div data-bind="using: value">
      descendant nodes bound with
      <code data-bind="text:'typeof $data == ' + typeof $data"></code>
      <span data-bind="if: typeof $data !== 'function'">
        - <span style="color:red;">NOT</span> expected
      </span>
    </div>
  </li>
  <!-- /ko -->
  <!-- ko if: !!ko.bindingHandlers['let'] -->
  <li><code>let:</code> binding
    <div data-bind="let: {x: value}">
      descendant nodes bound with <code>x</code> bound with
      <code data-bind="text:'typeof x == ' + typeof x"></code>
      <span data-bind="if: typeof x !== 'function'">
        - <span style="color:red;">NOT</span> expected
      </span>
    </div>
  </li>
  <!-- /ko -->
</ul>
<hr/>
<ul>
  <li><code>&lt;span data-bind="foreach: values">&lt;span data-bind="text: typeof $data">&lt;/span>&lt;/span></code>
    <div>&rArr;
      <span data-bind="foreach: values">
      <code data-bind="text: typeof $data"></code>
    </span>
    </div>
  </li>
  <li><code>&lt;span data-bind="with: values[0]">&lt;span data-bind="text: typeof $data">&lt;/span>&lt;/span>&lt;span data-bind="with: values[1]">&lt;span data-bind="text: typeof $data">&lt;/span>&lt;/span>&lt;span data-bind="with: values[2]">&lt;span data-bind="text: typeof $data">&lt;/span>&lt;/span></code>
    <div>&rArr;
      <span data-bind="with: values[0]"><code data-bind="text: typeof $data"></code></span>
      <span data-bind="with: values[1]"><code...

JavaScript

ko.applyBindings({
  value: function() {
    return 'fastfasterfastest';
  },
  values: [
    ko.observable(function() {
      return 'fast';
    }),
    ko.observable(function() {
      return 'fastfaster';
    }),
    ko.observable(function() {
      return 'fastfasterfastest';
    })
  ]
});