JSFiddle - React, Tailwind, and code Playground

by amitava82

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" data-bind="value: $data.Value"/>
</script>

JavaScript

function DataModel(opts) {
    var self = this;
    self.Id = ko.observable();
    self.DisplayName = ko.observable();
    self.ValueDisplayType = ko.observable();
    self.Value = ko.observable();
    for (var i in opts)
        try{ self[i](opts[i]); } catch(e) {}
}

var viewModel = function() {
    var self = this;
    var l = data1.length, parsed_data = [];
for (var i = 0; i < l; i++)
    parsed_data.push( new DataModel(data1[i]) );
self.models = ko.observableArray(parsed_data);


    self.fetch = function(){
        self.models(data2)
    };
        self.save = function(data){
            var newValues = ko.toJS(self.models);
            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
    }
  ];