JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<script src="https://online.uk.clara.net/js/knockout.js"></script>

<ul class="list-unstyled list-inline position-absolute" style="bottom:10px; left:50%; width:60%; margin-left: -30%; text-align:center;">

    <!-- ko foreach: new Array(pageCount()) -->
        <li><i class="fa fa-square text-grey-light"></i></li>
    <!-- /ko -->
    
</ul>


<div class="row">
	
	<div class="center-block feature-item-width-control">
	
			<div class="feature-item-container" data-bind="foreach: features">
				<span data-bind="badge: badgeUrl, popover: { trigger: 'hover',  html: true, placement: 'left auto' }">
					<a data-placement='left' data-bind="attr: { href: target }">
						<img class="feature-item" name="feature_item" data-bind="attr: { src: icon, alt: name }">
					</a>
				</span>
			</div>
	
	</div>	
	  
</div>
    
<i class="fa fa-chevron-left fa-3x display-inline-block position-absolute" style="left:10px; top:45%" data-bind="click: previousPage, style: { color: page() > 1 ? '#999' : '#DFDFDF' }">previous</i>


<i class="fa fa-chevron-right fa-3x display-inline-block position-absolute" style="right:10px; top:45%" data-bind="click: nextPage, style: { color: page() < pageCount() ? '#999' : '#DFDFDF' }">next</i>

JavaScript

function FeaturesViewModel() {

		var self = this;

		self.limit = 4;
		
		self.page = ko.observable(1);
		self.pageCount = ko.observable(1);

        //test
        //self.currentPage = ko.observable(1); 
				
		self.features = ko.observableArray();
    
		self.refresh = function() { 
			$.get('/api/features?page=' + self.page() + '&limit=' + self.limit, function(data) {
				self.features(data.features);
				self.pageCount(data.pageCount);
		
			});
		};

		self.previousPage = function() {
			self.page( self.page() - 1 );
			if( self.page() < 1 ) self.page( 1 );
			self.refresh();
		};
	
		self.nextPage = function() {
			self.page( self.page() + 1 );
			if( self.page() > self.pageCount() ) self.page( self.pageCount() );
			self.refresh();
		};

	}

	$(function() {
	
		var featuresModel = new FeaturesViewModel();
		
		ko.applyBindings(featuresModel);
	
		featuresModel.refresh();
		
	});