Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
    <title>Mustache experiment</title>
    <link rel="stylesheet" href="http://mrmartineau.github.com/githubwatched/css/boost.css">
</head>
<body>
  
    <ol id="foo">
​
    </ol>
​
    <a href="#" id="load_more" class="button">Load more</a>
​
    <!--  ==========  -->
    <!--  === JS ===  -->
    <!--  ==========  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://raw.github.com/janl/mustache.js/master/mustache.js" type="text/javascript"></script>
    <script>
        (function($) {
​
            $(function() {
​
                var siteSetup = {
                    i: 4,
                    ajaxSetup: function() {
                        $.ajaxSetup({
​
                            complete: function(xhr, textStatus) {
                                console.log("complete");
                            },
                            error: function(jqXHR, textStatus, errorThrown){
​
                                if(jqXHR.status&&jqXHR.status==400){
                                    alert(jqXHR.responseText);
                                }else{
                                    alert("Something went wrong");
                                }
​
                                $('#load_more').text('Sorry, no more results... :(').fadeOut(1000);
                            }
                        });
                    },
                    init: function() {
                        siteSetup.ajaxSetup();
                        loadJSON.init();
                        loadMore.init();
                    }
                },
                loadJSON = {
                    init: function() {
                        $.ajax({
                            url: "https://api.github.com/users/mrmartineau/watched?page="+ siteSetup.i +"&per_page=100",
                            success: function(data){
                                var template = $('#tpl1').html(); // Find the template
                                var html = Mustache.to_html(template, {arr:data});
​
                                $('#foo').html(html); // print the result
                            }
                        });
                    }
                },
                loadMore = {
                    init: function() {
                        $('#load_more').on('click', function (event) {
                            event.preventDefault();
                            siteSetup.i++;
                            console.log(siteSetup.i);
                            $.ajax({
                                url: "https://api.github.com/users/mrmartineau/watched?page="+ siteSetup.i +"&per_page=100",
                                success: function(data, textStatus, xhr) {
                                    var template = $('#tpl1').html(); // Find the template
                                    var html = Mustache.to_html(template, {arr:data});
​
                                    console.log(html);
​
                                    $(html).appendTo('#foo');
​
                                }
                            });
​
                        });
                    }
                };
​
                siteSetup.init();
​
            });//End Doc Ready
​
        })(jQuery);
​
    </script>
  
    <script id="tpl1" type="text/template">
        {{#arr}}
            <li>
                <img src="{{owner.avatar_url}}" width="30">
                <a href="{{html_url}}" title="{{name}}" class="item_name">{{name}}</a>
                <a href="{{owner.url}}" title="{{owner.login}}" class="item_owner">{{owner.login}}</a>
                <div class="item_description">{{description}}</div>
                <div class="item_language">{{language}}</div>
            </li>
        {{/arr}}
    </script>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers