JSFiddle - React, Tailwind, and code Playground

by aybalasubramanian

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0rc.js"></script>
<script src="http://rawgithub.com/thinkloop/knockout-js-infinite-scroll/master/infinitescroll.js"></script>
<body style="width: 100%; height: 100%; font-family: Sans-serif;">
    <p style="font-size: 0.8em; color: #696969; font-style: italic;">
        example of 
        <a href="https://github.com/thinkloop/knockout-js-infinite-scroll" style="color: #292929; text-decoration:none;">knockout-js-infinite-scroll</a>
        <br />
        developed for
        <a href="http://www.oppositeofopposite.com/" style="color: #292929; text-decoration:none;">OppositeofOpposite.com</a>
    </p>
        
    <div>
        <strong>Total items:</strong>
        <span data-bind="text: filteredItems().length"></span>
        <br />
        <strong>Display items:</strong>
        <span data-bind="text: filteredItems.infinitescroll.numItemsPerPage()"></span>
        <br />
        <strong>Rendered items:</strong>
        <span data-bind="text: filteredItems.infinitescroll.displayItems().length - filteredItems.infinitescroll.firstHiddenIndex()"></span>
        <br />
    </div><br />
        
    <div>
        <strong>Num items per page:</strong>
        <span data-bind="text: filteredItems.infinitescroll.numItemsPerPage()"></span>
        <br />
        <strong>First visible item index:</strong>
        <span data-bind="text: filteredItems.infinitescroll.firstVisibleIndex()"></span>
        <br />
        <strong>Last visible item index:</strong>
        <span data-bind="text: filteredItems.infinitescroll.lastVisibleIndex()"></span>
    </div><br />
        
    <div style="font-size: 0.8em;">
        <strong>container w/h: </strong>
        <span data-bind="text: filteredItems.infinitescroll.viewportWidth() + 'px / ' + filteredItems.infinitescroll.viewportHeight() + 'px'"></span>
        <br />
        <strong>each item w/h: </strong>
        <span data-bind="text: filteredItems.infinitescroll.itemWidth()...

JavaScript

// knockout-js-infinite-scroll (common usage)
ViewModel = function () {
    var self = this;

    self.items = ko.observableArray();
    self.filteredItems = ko.observableArray();
    self.filteredItems.extend({
        infinitescroll: {}
    });

    // detect resize
    $(window).resize(function() {
        updateViewportDimensions();
    });

    // detect scroll
    $(items).scroll(function() {
        self.filteredItems.infinitescroll.scrollY($(items).scrollTop());
        
        // add more items if scroll reaches the last 100 items
        if (self.filteredItems.peek().length - self.filteredItems.infinitescroll.lastVisibleIndex.peek() <= 100) {
            populateItems(100);
        }
    });

    // update dimensions of infinite-scroll viewport and item
    function updateViewportDimensions() {
        var itemsRef = $('#items'),
            itemRef = $('.item').first(),
            itemsWidth = itemsRef.width(),
            itemsHeight = itemsRef.height(),
            itemWidth = itemRef.outerWidth(),
            itemHeight = itemRef.outerHeight();

        self.filteredItems.infinitescroll.viewportWidth(itemsWidth);
        self.filteredItems.infinitescroll.viewportHeight(itemsHeight);
        self.filteredItems.infinitescroll.itemWidth(itemWidth);
        self.filteredItems.infinitescroll.itemHeight(itemHeight);

    }
    updateViewportDimensions();

    // init items
    function populateItems(numTotal) {
        var existingItems = self.filteredItems(),
            item = '',
            alphabet = 'abcdefghijklmnopqrstuvwxyz',
            numTotal = numTotal || 500;

        for (var i = 0; i < numTotal; i++) {
            item = '';
            for( var j = 0; j < Math.floor(Math.random() * 20) + 1; j++ ) {
                item += alphabet.charAt(Math.floor(Math.random() * alphabet.length));
            }
            existingItems.push(item);
        }
        self.filteredItems(existingItems);
    }
    populateItems();
}

ko.applyBindings(new...