JSFiddle - React, Tailwind, and code Playground

by Sky Sigal

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/klass/1.0/klass.js"></script>
<div>
   <p>D1: <input data-bind='value: d' /></p> 
   <p>D2: <input data-bind='value: student.d2' /></p> 
   <p>D3: <input data-bind='value: student.d3' /></p> 
   <p>First name: <input data-bind='value: student.firstName' /></p> 
    <p>Last name: <input data-bind='value: student.lastName' /></p> 
 </div>
 <h3>*Full Name:* <span data-bind='text: student.fullName'> </span>!</h3>

JavaScript

// Here's my data model
var ViewModel = function(first, last) {
    this.d = ko.observable("boo");
    this.studentAsFunction = new function(){
        var self=this;
        self.d2 = "foo";
        self.d3 = ko.observable(self.d2);
        self.firstName = ko.observable(first);
        this.lastName = ko.observable(last);
        self.fullName = ko.computed(function() {
            return self.d2 + ":" + self.firstName() + " " + this.lastName();
            }, self);
    };
    /*
    //wouldn't doing it as an object-literal would be less rigourous?
    //Where is the 'this'? to observe?
    this.studentAsObjectLiteral = {
        d2 : "foo",
        firstName : ko.observable(first),
        lastName : ko.observable(last),
        fullName : ko.computed(function() {
            return this.d2 + ":" + firstName() + " " + lastName();
            }); //This is context of VM, not Student...not good.
    }
    */
    
    //Flip this to test between options
    this.student = this.studentAsFunction;
    //this.student = this.studentAsObjectLiteral;

};
 
ko.applyBindings(new ViewModel("John", "Smith")); // This makes Knockout get to work


/*
 
*/