[SOLVED] Using Tempo & JSON with the Dribbble API

Using Tempo & JSON with the Dribbble API

I'm new to JSON & am having a hard time trying to get my head around it. I found a cool library called Tempo ( https://github.com/twigkit/tempo/ , http://twigkit.github.com/tempo/ ) that seems to make working with JSON much easier but I still cannot get it to work on my simple example using Dribbble's API. Can anyone point me in the right direction?

I have created a fiddle at: http://jsfiddle.net/mrmartineau/2uDZK/ which can also be viewed more easily here: http://fiddle.jshell.net/mrmartineau/2uDZK/show/ . You will see that I have tried a number of different things, none of which work... Also, I would like to know how I control how many results are displayed on the page if my example were to work - Dribbble has documentation here: http://dribbble.com/api (I am using the get_shots_list example btw: http://dribbble.com/api#get_shots_list)

I think I have an inherent misunderstanding of how to handle a JSON feed (if that's what you call it) so I would appreciate someone setting me straight.

Many thanks in advance

Solution

Just a couple of minor things. This is how you would invoke Tempo with JavaScript (including adding a 'loading' icon'.

$(document).ready(function() {
    var dribbble = Tempo.prepare('dribbble').notify(function(event) {
        if (event.type === TempoEvent.Types.RENDER_STARTING || event.type === TempoEvent.Types.RENDER_COMPLETE) {
            $('div#dribbble').toggleClass('loading');
        }
    });
    dribbble.starting();
    $.getJSON("http://api.dribbble.com/shots/popular?callback=?", function(data) {
        dribbble.render(data);
    });
});

And here's a template showing dribbbles and player information. Notice that we render the entire JSON response (data), and use a nested template (data-template="shots") to render each shot. This allows you access things like the {{found}} variable.

<div id="dribbble">
    <h2>{{total}} found</h2>

    <ol id="dribbbles">
        <li data-template="shots">
            <img src="{{image_url}}" height="150" width="200" />
            <h3><a href="{{url}}">{{title}}</a> ({{views_count}})</h3>              

            <img src="{{player.avatar_url}}" class="player" height="30" width="30" />
            <p class="name">Created by <b>{{player.name}}</b>, {{player.likes_received_count}} likes.
            </div>
        </li>
    </ol>
</div>

You can see this (styled) in action here: http://twigkit.github.com/tempo/examples/dribbble

Good luck! Stefan