2011-03-13 2 views
0

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

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

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

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

ответ

3

Всего несколько мелких вещей. Это, как вы бы вызвать темп с помощью 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); 
    }); 
}); 

А вот шаблон, показывающий dribbbles и информацию об игроке. Обратите внимание, что мы предоставляем весь ответ 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

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

+1

Thanks Stefan, какая легенда! – Zander

+1

Удовольствие, удачи в проекте! Ознакомьтесь с http://twitter.com/mrolafsson для получения обновлений и релизов или посмотрите наш репозиторий Github: https://github.com/twigkit/tempo –

+0

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

1

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

1

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

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

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

0

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

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

Простая Tu Использование:

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

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

Смежные вопросы