JSFiddle - React, Tailwind, and code Playground

by luigi

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="carousel slide" id="brands-carousel">
            <div class="carousel-inner" data-bind="foreach: brands">
                <!-- ko if: $parent.isFirst() -->
                <div data-bind="css: $parent.defineItemClass($index)">
                    <ul class="thumbnails">
                        <!-- /ko -->
                        <li class="span1">
                            <div class="caption">
                                 <h5 data-bind="text: Name"></h5>

                            </div>
                            <div class="thumbnail">
                                <img src="http://placehold.it/260x180" alt="">
                            </div>
                        </li>
                        <!-- ko if: $parent.drawTail() -->
                    </ul>
                </div>
                <!-- /ko -->
            </div>
        </div>
    </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

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;

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

    this.brands = ko.observableArray();
    this.loaded = ko.observable(false);

    this.initialize();

    this.defineItemClass = function (index) {
        if (index() === 0) {
            return "item active";
        }
        return "item";
    };

    this.isFirst = function () {
        _draw = (_counter === 0);
        if (++_counter == _itemsPerSet) {
            _counter = 0;
        }
        return _draw;
    };

    this.drawTail = function () {
        return _draw;
    };
};

ko.appyBindings(new WidgetViewModel());