JSFiddle - React, Tailwind, and code Playground

by Ben Foster

HTML

<ul></ul>

JavaScript

var mockData = (function($, undefined) {

    var fruit = [
        "apple",
        "orange",
        "banana",
        "pear"
        ];

    var getFruit = function() {
        return $.Deferred().resolve(fruit).promise();
    };

    return {
        getFruit: getFruit
    }
})(jQuery);

var liveData = (function($, undefined) {

    var fruit = ["mango", "pinapple", "lemon", "lime"];

    var getFruit = function() {
        var fruitPromise = $.ajax({
            url: "/echo/json/",
            data: {
                json: JSON.stringify(fruit)
            },
            type: "POST"
        });

        return fruitPromise;

    };

    return {
        getFruit: getFruit
    };

})(jQuery);


var FruitModel = function(dataContext, $) {
    return {
        render: function() {
            dataContext.getFruit().then(function(fruit) {
                var $list = $("ul");

                $.each(fruit, function(i, val) {
                    $list.append("<li>" + val + "</li>");
                });
            });

        }
    };
};

var viewModel = new FruitModel(liveData, jQuery);
viewModel.render();