我正在尝试学习Handlebars.js,想到了一种在网站中使用它的方法.这是一个单页网站,它将有两个容器,每个容器有三个div,它们将通过API包含嵌入式Soundcloud播放器.
当在Handlebars处理的脚本标记中包含包含API请求的div时,该站点表现得非常不可靠并且仅显示六个玩家中的一些.这不是真的一致,但可以一直展示不同的球员.问题似乎是在Soundcloud javascript SDK中,但我觉得不太熟悉在那里挖掘太多.
因此我想到了一些方法来排除玩家div(见代码),以便他们立即加载而不是作为javascript处理,但仍然显示在艺术家的下方 - 占位符div中的标题(设置为包含结果Handlebar脚本).
问题是我无法想出一个很好的方法,有没有任何简单的功能(可能有Handlebars助手),这将帮助我做我想要的?
<div id="placeholder"></div>
<script id="player-template" type="text/x-handlebars-template">
<div id="container1">
Artist1 - {{title1}}
<div id="player1"></div>
Artist2 - {{title2}}
<div id="player2"></div>
Artist3 - {{title3}}
<div id="player3"></div>
</div>
<div id="container2">
Artist4 - {{title4}}
<div id="player4"></div>
Artist5 - {{title5}}
<div id="player5"></div>
Artist6 - {{title6}}
<div id="player6"></div>
</div>
</script>
<script src="js/handlebars_title_script.js"></script>
Run Code Online (Sandbox Code Playgroud)
一个解决方案当然是为每个Artist - Title div制作一个Handlebar模板,并将每个模板的占位符设置为仅包含Artist1 - {{title1}}的div,但这实际上破坏了使用Handlebars来最小化HTML编码的重点.
有人给我任何提示如何解决这个问题?
编辑1:
我通过更改我的javascript找到了另一种解决方案(我最初没有发帖,所以很明显你无法帮助我).
$(document).ready(function() {
var hey = "heya";
SC.get("/users/artist/tracks", {limit: 1}, function(tracks){
var title_data1 = tracks[0].title;
hey = tracks[0].title;
alert(title_data1);
alert(hey) …Run Code Online (Sandbox Code Playgroud)