使用handlebars.js渲染youtube搜索数据时遇到问题

Question

我正在使用youtube数据API，并希望模拟我的视频搜索结果，但目前我对渲染每个数据的路径感到困惑，我的数据结构是，顺便说一下我是＆＃39 ; m使用Backbone并解析响应以返回response.items。

数据

我的模板如下所示：

<div class="video" title="{{snippet.title}}" id="{{id.videoId}}">
    <img class="video-image" src="{{snippet.thumbnails.default.url}}">
    <p class="video-title">{{snippet.title}}</p>
    <p class="video-author">{{snippet.channelId}}</p>
    <p class="video-description">{{snippet.description}}</p>
</div>

这也是正确类型的搜索结果数据吗？我怎么能喜欢/不喜欢？

Answer 1

如果我正确理解您的问题，您是否无法让模板正确呈现您的数据？如果是这样的话：

您在response.items中获得的数据是一个数组，因此您必须在模板中循环它们。

像这样修改你的模板：

{{each results}}
<div class="video" title="{{snippet.title}}" id="{{id.videoId}}">
    <img class="video-image" src="{{snippet.thumbnails.default.url}}">
    <p class="video-title">{{snippet.title}}</p>
    <p class="video-author">{{snippet.channelId}}</p>
    <p class="video-description">{{snippet.description}}</p>
</div>
{{/each}}

假设您已将Handlebars模板编译为名为template的变量，您可以这样做：

var context = {
   results: response.items
};
var html = template(context);

请注意，context对象具有results属性，该属性是使用{{each results}}循环的数组。

由于您使用的是Backbone，因此您可能希望更新视图 this.$el.html(html);。别忘了return this;方法中的render！

---

就搜索结果数据的类型而言，我不知道这是正确还是错误的结果......这取决于您。你想要什么样的结果？您获取的数据是否正在寻找？

如果你想要喜欢/不喜欢，你必须在每个视频的基础上查看。注册您的YouTube v3 API应用程序，并对视频资源API Documentation执行GET请求。这将返回匹配视频列表（Video resource documentation），其中包含likecount和dislikecount。