JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="carousel slide" id="brands-carousel">
            <div class="carousel-inner" data-bind="foreach: brands_in_fours">
                <div class="item" data-bind="css: {'active': $index()==0}">
                    <ul data-bind="foreach: $data">
                        <li class="span3">
                            <div class="caption">
                                 <h5 data-bind="text: Name"></h5>

                            </div>
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="" />
                            </div>
                        </li>
                    </ul>
                </div>
            </div> <a class="carousel-control left" href="#brands-carousel" data-slide="prev">&lsaquo;</a>
 <a class="carousel-control right" href="#brands-carousel" data-slide="next">&rsaquo;</a>

        </div>
    </div>
</div>

JavaScript

var widgetApi = {
        getBrands: function () {
            // faked ajax call.
            return {
                Tags: [{
                    Name: 'Heinz',
                    Image: ''
                }, {
                    Name: 'Forever 21',
                    Image: ''
                }, {
                    Name: 'Ford',
                    Image: ''
                }, {
                    Name: 'GM',
                    Image: ''
                }, {
                    Name: 'Eureka',
                    Image: ''
                }, {
                    Name: 'Gatorade',
                    Image: ''
                }, {
                    Name: 'Apple',
                    Image: ''
                }, {
                    Name: 'Samsung',
                    Image: ''
                }, {
                    Name: 'Coke',
                    Image: ''
                }, {
                    Name: 'Pepsi',
                    Image: ''
                }]
            };
        }
    };

    var WidgetsViewModel = function () {
        var self = this,
            _draw = false,
            _counter = 0,
            _itemsPerSet = 8;

        self.initialize = function () {
            $.when(widgetApi.getBrands()).then(function (items) {
                ko.utils.arrayForEach(items.Tags, function (item) {
                    self.brands.push(item);
                });
                self.loaded(true);
            });
        };

        self.brands = ko.observableArray();
        self.brands_in_fours = ko.computed(function () {
            var outer_array = [];
            _.each(self.brands(), function (item, index) {
                if (index % 4 == 0) {
                    outer_array.push(ko.observableArray([item]));
                } else {
                    outer_array[outer_array.length - 1]().push(item);
                }
            });
            return outer_array;
        });

        self.loaded = ko.observable(false);
    ...