Использование Tempo & JSON с API Dribbble

Question

Я новичок в JSON и с трудом пытаюсь разобраться с этим.Я нашел классную библиотеку под названием Tempo (https://github.com/twigkit/tempo/, http://twigkit.github.com/tempo/), которая, кажется, значительно облегчает работу с JSON, но я все еще не могу заставить ее работать на моем простом примере с использованием API Dribbble.Кто-нибудь может указать мне правильное направление?

Я создал скрипку по адресу: http://jsfiddle.net/mrmartineau/2uDZK/, которую также можно просмотреть здесь: http://fiddle.jshell.net/mrmartineau/2uDZK/show/.Вы увидите, что я пробовал несколько разных вещей, ни одна из которых не работает ... Кроме того, я хотел бы знать, как я контролирую, сколько результатов будет отображаться на странице, если мой пример будет работать - Dribbble имеет документацию здесь:http://dribbble.com/api (я использую пример get_shots_list, кстати: http://dribbble.com/api#get_shots_list)

Я думаю, что у меня есть внутреннее недопонимание того, как обрабатывать фид JSON (если это то, что вы называете), поэтому я был бы признателенкто-то поправляет меня.

Большое спасибо заранее

Answer 1

Просто пара мелких вещей.Вот так вы бы вызывали Tempo с помощью JavaScript (включая добавление значка «загрузки»).

$(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);
    });
});

А вот шаблон, показывающий дриблинг и информацию об игроке. Обратите внимание, что мы отображаем весь ответ JSON (data) и использовать вложенный шаблон (data-template="shots") для рендеринга каждого снимка. Это позволяет получить доступ к таким вещам, как переменная {{found}}.

<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>

Вы можете увидеть это (стилизованное) в действии здесь: http://twigkit.github.com/tempo/examples/dribbble

Удачи! Стефан

Answer 2

Для этого вам следует использовать JSONP, а Dribbble уже обеспечивает совместимость с JSONP, поддерживая ?callback=function соглашение.

Я изменил код, чтобы он заработал: http://jsfiddle.net/2uDZK/2/

Похоже, что с вашим шаблоном возникла другая проблема, поэтому я просто записываю данные в консоль браузера.

Answer 3

Похоже, проблема в том же домене для отправки и получения запросов.Есть способ обойти это, используя jsonp, который поддерживает API Dribbble.Проверьте JSONP .

Answer 4

Используйте эту простую библиотеку Javascript Dribbble API: Dribbble.js

Вы можете увидеть пример здесь: Пример API Dribbble

Это простоТу использовать:

// get the most popular shots 
Dribbble.list( 'popular', function( response ){ 
   // write your code here 
});

Спасибо, удачи!