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>&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>
    
    <span data-bind="foreach: [ values[0] ]">
    <span data-bind="if: typeof $data !== 'function'">
      - <span style="color:red;">NOT</span> expected
    </span>
    </span>
    
    </div>
  </li>
  </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="using: values[0]">&lt;span data-bind="text: typeof $data">&lt;/span>&lt;span data-bind="using: values[1]">&lt;span data-bind="text: typeof $data">&lt;/span>&lt;span data-bind="using: values[2]">&lt;span data-bind="text: typeof $data">&lt;/span></code>
  <div>&rArr;
    <span data-bind="using: values[0]"><code data-bind="text: typeof $data"></code></span>
    <span data-bind="using: values[1]"><code data-bind="text: typeof $data"></code></span>
    <span data-bind="using: values[2]"><code data-bind="text: typeof $data"></code></span>
    </div>
  </li>
  </ul>
<hr/>
<ul>
  <li><code>&lt;span data-bind="foreach: [function () { return <i>truthy</i>}]">&lt;span data-bind="text: typeof $data">&lt;/span>&lt;/span></code>
    <div>&rArr;
    <span data-bind="foreach: [ value ]">
      <code data-bind="text: typeof $data"></code>
    </span>
    </div>
  </li>
  <li><code>&lt;span data-bind="with: function () { return <i>truthy</i>}">&lt;span data-bind="text: typeof $data">&lt;/span>&lt;/span></code>
    <div>&rArr;
    <span data-bind="with: value">
      <code data-bind="text: typeof...

JavaScript

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