JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/js/knockout-1.2.1.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/sunny/jquery-ui.css" type="text/css" />

<script type="x-jquery-tmpl" id="chargeRowTemplate">
    <div>
        <span data-bind="text: chargeType"></span>
        <span data-bind="text: amount"></span>
        <a href='#' data-bind="click: function(){ viewModel.editCharge($data); }">Edit</a>
        <a href='#' data-bind="click: function(){ viewModel.removeCharge($data); }">Remove</a>
    </div>
</script>

<script type="x-jquery-tmpl" id="editChargeTemplate" >
    <label for="txtChargeType">Charge Type:</label>
    <input type="text" id="txtChargeType" data-bind="text:
    chargeType,value:chargeType" />
    <label data-bind="text: chargeType"/>
    <br />
    <label for="txtAmount">Amount:</label>
    <input type="text" id="txtAmount" />
    <br />
</script>

<div id="ChargeDetail" data-bind="template: { name:'chargeRowTemplate', foreach: charges }"></div>

<div id="ChargeEditor" style="visibility:hidden">
    <label for="txtChargeType">Charge Type:</label>
    <input type="text" id="txtChargeType" data-bind="text:chargeType,value:chargeType" />
    <label data-bind="text: chargeType"/>
    <br />
    <label for="txtAmount">Amount:</label>
    <input type="text" id="txtAmount" />
    <br />
</div>

JavaScript

var chargeModel = function() {
    this.chargeType = ko.observable();
    this.amount = ko.observable();
}
var ChargeMaster = function() {
    this.charges = ko.observableArray();
    this.editCharge = function(chargeData) {
        alert(chargeData.amount);
        $("#ChargeEditor").empty();
        $("#editChargeTemplate").tmpl(chargeData).appendTo("#ChargeEditor");
        ko.applyBindings(chargeData);
        $("#ChargeEditor").dialog({
            modal: true
        });
        
        $("#ChargeEditor").css("visibility", "visible");
    };
    this.removeCharge = function(chargeData) {
        this.charges.remove(chargeData);
    };
    this.addCharge = function(data) {
        this.charges.push(data);
    };

}
var viewModel = new ChargeMaster();
$(function() {
    var item = new chargeModel();
    item.amount = 100;
    item.chargeType = "ChargeType1";

    var item2 = new chargeModel();
    item2.amount = 200;
    item2.chargeType = "ChargeType2";
    viewModel.addCharge(item);
    viewModel.addCharge(item2);
    ko.applyBindings(viewModel, $("#ChargeDetail")[0]);

});