JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div data-bind="foreach: models">
    <div>
        <label data-bind="text: DisplayName"></label>
     <!-- ko template: {name: 'displayTmpl'} -->
<!-- /ko -->
    </div>
</div>
<br />
<button data-bind="click: fetch">fetch new model</button>
<button data-bind="click: save">save</button>
<script id="displayTmpl" type="text/html">
<input type="text"/>
</script>

JavaScript

var viewModel = function() {
    var self = this;
    self.models = ko.observableArray(data1);
    self.fetch = function(){
        self.models(data2)
    };
        self.save = function(){
            var newValues;
            console.log(newValues);
        }    
};

$(function() {
    ko.applyBindings(new viewModel());
})
var data1 = [
    {
    "Id": 10,
    "DisplayName": "SLA In Minutes",
    "ValueDisplayType": 0},
{
    "Id": 11,
    "DisplayName": "Total Reads",
    "ValueDisplayType": 0},
{
    "Id": 12,
    "DisplayName": "Rad Accept Time Out",
    "ValueDisplayType": 0},
{
    "Id": 13,
    "DisplayName": "MT Accept Time Out",
    "ValueDisplayType": 0}];


var data2 = [    {
      "Id": 15,
      "DisplayName": "Prelim Read For Fax",
      "ValueDisplayType": 0
    },
    {
      "Id": 16,
      "DisplayName": "Reporting Type",
      "ValueDisplayType": 3
    },
    {
      "Id": 17,
      "DisplayName": "Image Complete TimeOut",
      "ValueDisplayType": 0
    }
  ];