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;
    
    // Not sure what this is trying to accomplish. Are you trying to use this
    // to hide the table by not binding to your real target? Just use a bool
    // and the "visible" binding instead.
    var myFormData = ko.viewmodel.fromModel(emptyDataModel);
    
    // This is what you're trying to bind to with foreach, but you declared 
    // it with var. That means it's private. This is the same issue you
    // were having before with private values not being visible. Because it's
    // null, your return value is just getting a copy of it. You may want to
    // reconsider the way that you build classes, as it seems to be prone to
    // closure problems.
    var myOutputData = null;
    
    var inputFormDataAsJson = ko.computed(function () {
        var rtn = JSON.stringify(ko.viewmodel.toModel(myFormData));
        return rtn;
    }, self);

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

        var dfd = amplify.request({
            resourceId: "getOutput",
            data: inputdata,
            success: function (data, status) {
                self.myOutput = data; // Pretend to pull data from a service. 
                alert('I will have data after I close this alert');
                $('#watchFormOutput').html(JSON.stringify(self.myOutput));
                // I need to kc.Applying for my Output data here. 
                bindMyOutputTable();
                dfd.resolve();
            },
            error: function (data, status) {
                dfd.reject();
                // do nothing 
            }
        }).promise();
    };
    
    // *************Here is where I Need help*******************************
    var bindMyOutputTable =...