JSFiddle - React, Tailwind, and code Playground

by NinjaFish

HTML

<script src="http:////cdnjs.cloudflare.com/ajax/libs/amplifyjs/1.1.0/amplify.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://coderenaissance.github.com/knockout.viewmodel/knockout.viewmodel.min.js"></script>
You don't need to fill anything here, just click the "DO SOMETHING" button,
I was testing data capturing.
<br/>Header Value1
<input type="text" data-bind="value: myFormData.headerValue1">
<br/>Header Value2
<input type="text" data-bind="value: myFormData.headerValue2">
<hr/> <b>Watching Input Data:</b>

<div id="watchFormInputData" data-bind="text: inputFormDataAsJson"></div>
<hr/>
<button id="btnDoSomething" class="btn btn-primary">Do Something</button>
<hr/> <b>Watching Output Data</b>

<div id="watchFormOutput"></div>
<hr/>How can I bind this after I have data? initially I don't want it to show
until I get a postback from my mock request.
<br/>Also, it's a master-detail type of grid, where when I click detail I can
see its detail... here's infor about ko.viewmodel <a href="http://coderenaissance.github.com/knockout.viewmodel/"
target="_blank">http://coderenaissance.github.com/knockout.viewmodel/</a>

<table
style="width:100%" border="1">
    <tr>
        <th>Output Header 1</th>
        <th>Output Header 2</th>
        <th>Action</th>
    </tr>
    <!--- here is my template I want but how to do foreach where my action
    click button is show detail -->
    <tbody data-bind="foreach: myOutputData">
        <tr>
            <td><span data-bind="text: outputHeader1" />
            </td>
            <td><span data-bind="text: outputHeader2" />
            </td>
            <td>
                <button class="btn btn-mini">click to so detail</button>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="display:none">Bind my detail here ....</td>
  ...

JavaScript

// alert("Read the comments.");

// Testing Header - detail binding, mocking using amplify
var emptyInputDataModel = {
    headerValue1: "",
    headerValue2: ""
};
var ThisAppVm = function (emptyDataModel) {
    var self = this;
    
    this.myFormData = ko.viewmodel.fromModel(emptyDataModel);
    this.myOutputData = ko.viewmodel.fromModel({outputData: []});
    
    this.isOutputVisible = ko.computed(function() { return this.myOutputData.outputData().length === 0; }, self);
    this.inputFormDataAsJson = ko.computed(function () {
        var rtn = JSON.stringify(ko.viewmodel.toModel(this.myFormData));
        return rtn;
    }, self);

    var doSomething = function () {
        //Pretend to post my InputData to a service 
        var inputdata = null;

        var request = amplify.request({
            resourceId: "getOutput",
            data: inputdata,
            success: function (data, status) {
                $('#watchFormOutput').html(JSON.stringify(self.myOutput));
                
                // I need to kc.Applying for my Output data here. 
                bindMyOutputTable(data);
            },
            error: function (data, status) {
                // do nothing 
            }
        });
    };
    
    // *************Here is where I Need help*******************************
    var bindMyOutputTable = function (data) {
        ko.viewmodel.updateFromModel(self.myOutputData, ko.viewmodel.fromModel(data));
    };

    this.init = function () {
        // Define my mock doSometing
        amplify.request.define("getOutput", function (settings) {
            settings.success({
                outputData: [{
                    outputHeader1: "1. something",
                    outputHeader2: "1. another thing",
                    someDetail: [{
                        detailValue1: "D1A",
                        detailValue2: "D2A"
                    }, {
                        detailValue1: "D3A",
                       ...