Question

我是JSON＆amp;的新手我正在努力试图理解它。我发现了一个名为Tempo（https://github.com/twigkit/tempo/，http://twigkit.github.com/tempo/）的酷库，它似乎更容易使用JSON，但我仍然无法使用Dribbble的API来处理我的简单示例。有人能指出我正确的方向吗？

我在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提要有一个固有的误解（如果这就是你所说的那样）所以我很感激有人让我直截了当。

非常感谢提前

Answer 1

只是一些小事。这就是你用JavaScript调用Tempo的方法（包括添加'loading'图标'。

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

看起来问题与发布和获取请求的域策略相同。通过使用Dribbble api支持的jsonp，可以解决这个问题。查看JSONP。

Answer 3

你应该使用JSONP来实现这一点，而Dribbble已经通过支持?callback=function约定提供了JSONP兼容性。

我修改了代码以使其正常工作：http://jsfiddle.net/2uDZK/2/

您的模板似乎还有其他一些问题，所以我只是将数据记录到浏览器控制台。

Answer 4

使用这个简单的Javascript Dribbble API库：Dribbble.js

您可以在此处查看示例：Dribbble API Example

简单易用：

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

谢谢，祝你好运！

使用Tempo＆amp;使用Dribbble API的JSON

4 个答案: