<div class="c xs-12 comments">
            </div>
            <div class="c xs-12">
                <ul class="comments-pager"></ul>
            </div>
            <script type="application/json" id="comment-data">
                {{{comments}}}
            </script>
            <script type="text/html" id="comment-template">
                <div class="comment r">
                    <div class="c s-4 m-2 h-xs">
                        <img class="comment-image" src="{{#func.wwwroot}}Uploads/Images/avatar.png{{/func.wwwroot}}?h=100&w=100">
                    </div>
                    <div class="c xs-12 s-8 m-10">
                        <div class="comment-name">##name##</div>
                        <div class="comment-date">##date##</div>
                        <div class="comment-content">##content##</div>
                    </div>
                </div>
            </script>
            <script type="text/html" id="pager-template">
                <li class="pager-entry" data-page="##page##"><span>##content##</span></li>
            </script>
            <script>
                $(function () {
                    var commentsContainer = $('.comments'),
                        template          = $('#comment-template').html(),
                        pager             = $('.comments-pager'),
                        pagerTemplate     = $('#pager-template').html(),
                        data              = JSON.parse($('#comment-data').html());

                    var currentPage = 1,
                        maxPerPage  = 3,
                        pages       = Math.ceil(data.count / maxPerPage);

                    function setPage(pageNum) {
                        if (pageNum >= 1 || pageNum <= pages) {
                            currentPage = pageNum;

                            update();
                        }
                    }

                    function update() {
                        pager.find('.pager-entry').each(function () {
                            if (parseInt($(this).attr('data-page')) === currentPage) {
                                $(this).addClass('active');
                            } else {
                                $(this).removeClass('active');
                            }
                        });

                        var startIndex = maxPerPage * (currentPage - 1);

                        commentsContainer.html('');
                        for (var i = startIndex; i < startIndex + maxPerPage; i++) {
                            var entry = data.entries[i];
                            var temp = JSON.parse(JSON.stringify(template));
                            temp = temp.replace('##name##', entry.name);
                            temp = temp.replace('##date##', entry.added);
                            temp = temp.replace('##content##', entry.content);
                            temp = $(temp);

                            commentsContainer.append(temp);
                        }
                    }

                    function addPagerEntry(content, pageNum) {
                        var temp = JSON.parse(JSON.stringify(pagerTemplate));
                        temp = temp.replace('##page##', pageNum);
                        temp = temp.replace('##content##', content);
                        temp = $(temp);

                        temp.bind('click', function () {
                            if (pageNum === 'prev') {
                                if (currentPage > 1) {
                                    setPage(currentPage - 1);
                                }
                            } else if (pageNum === 'next') {
                                if (currentPage < pages) {
                                    setPage(currentPage + 1);
                                }
                            } else {
                                setPage(pageNum);
                            }
                        });

                        pager.append(temp);
                    }

                    (function init() {
                        addPagerEntry('<i class="fa fa-chevron-left"></i>', 'prev');
                        for (var i = 1; i <= pages; i++) {
                            addPagerEntry(i, i);
                        }
                        addPagerEntry('<i class="fa fa-chevron-right"></i>', 'next');

                        update();
                    })();

                    console.log(data);
                });
            </script>