JSFiddle - React, Tailwind, and code Playground

by David Underwood

HTML

<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.min.js"></script>
<ul id="mylist" data-bind="foreach: highlighting">
    <li>
        <label data-bind="text: Id"></label>
        <label data-bind="text: Title"></label>
    </li>
</ul>
<button type="button" onclick="runme()">
Click
</button>

CSS

label { display: block; }
label + label { margin-left: 10px;font-size: smaller; }

JavaScript

var rawData = {
      "responseHeader": {
          "status": 0,
          "QTime": 0,
          "params": {
              "facet": "true",
              "facet.field": "System",
              "q": "testphrase",
              "rows": "1",
              "version": "2.2"
          }
      },
      "response": {
          "numFound": 0,
          "start": 0,
          "maxScore": 0.0,
          "docs": []
      },
      "facet_counts": {
          "facet_queries": {},
          "facet_fields": {
              "System": []
          },
          "facet_dates": {},
          "facet_ranges": {}
      },
     "highlighting": [
         { "Id": "2-33-200", 
           "Title": "1992 <b>Toyota</b> Camry 2.2L CV Boots" },
         {"Id": "2-28-340",
          "Title": "2003 <b>Toyota</b> Matrix 2.0L Alignment" },
         { "Id": "2-31-2042",
           "Title": "1988 <b>Toyota</b> Pickup 2.4L Engine" }
        ]
  };

var ViewModelMapping = {
    include: ['responseHeader', 'response', 'facet_counts', 'highlighting'],
    create: function (options) { return new ViewModel(options.data); }
};

var ViewModel = function(data) {
    var self = this;
    ko.mapping.fromJS(data, ViewModelMapping, self);
}

var FacetCountsMapping = {}

function runme() {
rawData.highlighting.push({ "Id": "2-33-555", 
           "Title": "2001 <b>Test</b> Camry 2.2L CV Boots" });
}

$(document).ready(function() {
    var viewModel = new ViewModel(rawData);
    ko.applyBindings(viewModel, document.getElementById('mylist'));
});