javascript - 将 Tempo 和 JSON 与 Dribbble API 结合使用

Question

我是 JSON 新手，并且很难理解它。我发现了一个名为 Tempo 的很酷的库( https://github.com/twigkit/tempo/ 、 http://twigkit.github.com/tempo/ )，它似乎使使用 JSON 变得更加容易，但我仍然无法使用 Dribbble 的 API 让它在我的简单示例中工作。谁能指出我正确的方向？

我创建了一个 fiddle :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 feed(如果这就是你所说的)有一个固有的误解，所以我希望有人能纠正我的错误。

提前非常感谢

Answer 1

只是一些小事情。这就是您使用 JavaScript 调用 Tempo 的方式(包括添加“正在加载”图标)。

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

祝你好运!斯特凡