JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- ko if: customers() -->
<div id="custInfoList" data-role="content" data-bind="foreach: customers">
    <p data-bind="text: $data.base"></p>
</div>
<!-- /ko -->
<div id="empty" data-role="content" data-bind="if: customers().length === 0">
    <p>No Customer Information</p>
</div>
<button data-bind="click:popByAjaxRight">Populate with no error</button>
<button data-bind="click:popByAjaxWrong">Populate with error</button>

JavaScript

$.support.cors = true;
var test = {
    customers: ko.observableArray(),
    popCustomers: function () {
        for (var i = 0; i < 3; i++) {
            this.customers.push(i);
        }
    },
    popByAjaxRight: function (city) {
        var arg = (typeof city === "number")?city:2172797; //ko implicitly passes this from the element context to function argument
        console.log(arg);
        $.getJSON("http://api.openweathermap.org/data/2.5/weather?id="+ arg, function (data) {
            console.log(data);
            if (data.cod === 200) {
                this.customers.push(data);
                console.log("Loaded");
            } else {
                this.customers([]);
            }
        }.bind(this));
    },
    popByAjaxWrong: function(){
        this.popByAjaxRight(21727971);
    }
};
ko.applyBindings(Object.create(test));