JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
<a data-bind="click: LoadData" href="#">Refresh</a>

<ul data-bind="template: { name: 'defaultTemplate', foreach: itemsArray}"></ul>
        
<script id="defaultTemplate" type="text/x-jquery-tmpl">
    <li>${ name }</li>   
</script>

JavaScript

function Meida(name, href) {
    this.name = name;
    this.href = href;
}

function viewModel() {
    this.itemsArray = ko.observableArray([]);
    self = this;
    var tempArray;
    this.LoadData = function() {
        if('undefined' != typeof self.itemsArray )
            self.itemsArray.removeAll();
        tempArray = [];
        self.itemsArray(tempArray);
        //self.LoadDataFromServerAsync(tempArray);  //the itemsArray could not sense data from tempArray in this way
        self.LoadDataFromServerAsync(self.itemsArray);  // this could show data, but will duplicate 
    };

    this.LoadDataFromServerAsync = function(collection) {
        setTimeout(function() {
            collection.push(new Meida("item1", "#"));
        }, Math.random() * 3000);
        
        setTimeout(function() {
            collection.push(new Meida("item2", "#"));
        }, Math.random() * 3000);
        
        setTimeout(function() {
            collection.push(new Meida("item3", "#"));
        }, Math.random() * 3000);
    };
    
    //initialize
    //this.LoadData();
}

ko.applyBindings(new viewModel());