JSFiddle - React, Tailwind, and code Playground

by adiga

HTML

<script src="https://rawgit.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<div id="page-content">

  <ol data-bind="foreach: data.survey().questions">
    <li>
      <span data-bind="text: text"></span>
      <br> Answers:

      <ul data-bind="foreach: answers">
        <li data-bind="text:text">
        </li>
      </ul>
    </li>
  </ol>
</div>

JavaScript

var data = {
  survey: ko.observable({
    "name": "x",
    "questions": [{
      text: "Who let the dogs out?",
      answers: [{
        number: 1,
        text: "Nobody"
      }, {
        number: 2,
        text: "Cats"
      }, {
        number: 3,
        text: "Baha Men"
      }]
    }, {
      text: "What does the fox say?",
      answers: [{
        number: 1,
        text: "Woof Woof"
      }, {
        number: 2,
        text: "Ring-ding-ding-dingeringeding"
      }, {
        number: 3,
        text: "Meow Meow"
      }]
    }]
  })
};

ko.applyBindings({
  data: data
}, document.getElementById('page-content'));