JSFiddle - React, Tailwind, and code Playground

by Serkan YarbaĹź

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul>
    <!-- ko foreach: people -->
        <li>Merhaba <span data-bind="text: $data.fullName"></span></li>
    <!-- /ko -->
</ul>

JavaScript

var person = function(options){
    var self = this;
    self.name = ko.observable(options.name);
    self.lastName = ko.observable(options.lastName);
    self.fullName = ko.computed(function(){
        return self.name() + " " + self.lastName();
    });
};

var viewModel = function(options){
    var self = this;
    self.people = ko.observableArray(options.people);
};

var sertac = new person({name:"sertac",lastName:"yarbas"});
var serkan = new person({name:"serkan",lastName:"yarbas"});
var myPeoples = [serkan,sertac];
var vm = new viewModel({people:myPeoples});

$(document).ready(function(){
    ko.applyBindings(vm);
});