将Tempo和JSON与Dribbble结合使用

Question

我是JSON的新手，我很难理解它。我发现了一个名为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/。你会发现我已经尝试了很多不同的方法，但都不起作用……另外，我想知道如果我的示例可以工作，我如何控制在页面上显示多少结果- http://dribbble.com/api在这里有文档: get_shots_list (我使用的是get_shots_list示例btw：http://dribbble.com/api#get_shots_list)

我想我对如何处理JSON提要有一个固有的误解(如果您这么叫它的话)，所以我希望有人能纠正我。

非常感谢你提前

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

祝好运!斯特凡

Answer 2

看起来问题是post和get请求的相同域策略。有一种方法可以通过使用jsonp来解决这个问题，Dribbble支持jsonp。查看JSONP。

Answer 3

你应该使用JSONP来做这件事，并且Dribbble已经通过支持?callback=function约定提供了JSONP兼容性。

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

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