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" data-bind="visible: isOutputVisible">
      <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 data-bind="css: { selected: isSelected }">
          <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>
          <td><a href="#"...

CSS

tr.selected {
    background-color: #efefef;
}

JavaScript

// Testing Header - detail binding, mocking using amplify
var emptyInputDataModel = {
    headerValue1: "",
    headerValue2: ""
};
var ThisAppVm = function (emptyDataModel) {
    var self = this;
    var myFormData = ko.viewmodel.fromModel(emptyDataModel);
    self.myOutputData = ko.observableArray();
    self.isOutputVisible = ko.computed(function() {
        // This is just an idea. You can make the condition whatever.
        // This will re-hide the table if the output length is ever 0,
        // so you might want to go with just a boolean.
        return this.myOutputData().length > 0;
    }, self);
    
    self.toggleItem = function(item) {
        item.isSelected(!item.isSelected());
    };
    
    var inputFormDataAsJson = ko.computed(

    function () {
        var rtn = JSON.stringify(ko.viewmodel.toModel(myFormData));
        return rtn;
    }, self);
    var doSomething = function() {
        var inputdata = null;
        
        var callback = function(data) {
            bindMyOutputTable(data);
        };
        return $.Deferred(function (dfd) {
            amplify.request(
            { 
                resourceId: "getOutput", 
                data: inputdata, 
                success: function( data, status ) {
                    callback(data);
                    dfd.resolve();
                }
            });
        }).promise();
    };
    // *************Here is where I Need help*******************************
    var bindMyOutputTable = function(data) {
         self.myOutputData.removeAll();
        var extended = $.map(data.outputData, function(item) {
            item.isSelected = ko.observable(false);
            return item;
        });
         for (var i = 0; i < extended.length; i++) {
            self.myOutputData.push(extended[i]);
         }   
/*         
        ko.viewmodel.updateFromModel(self.myOutputData, ko.viewmodel.fromModel(data)  ); 
        self.myOutputData = data;*/
    };
    
    
    
    var init =...