在车把上说我们有此cards-list.html部分：
{{#each data}}
<article class="card card_list-view card_list-view--regular">
<picture class="card-image">
<img src="{{root}}/assets/img/{{this.img}}" alt="">
</picture>
<section class="card-section">
<header>
<h3><a href="{{this.url}}">{{this.title}}</a></h3>
</header>
</section>
</article>
{{/each}}
数据是这样的：
{"id": "1",
"title": "A",
"img": "imga.jpg",
"url": "card-single.html"
},
{"id": "2",
"title": "B",
"img": "imgb.jpg",
"url": "card-single.html"
}
和 - 在card-single.html中 - 我想简单地渲染单卡：
<article class="card card_single-view">
<h4>{{title}}</h4}
[etc..]
如何通过 href属性或其他方式通过 cards-list.html的原始上下文 card-single.html？
谢谢！
用Handlebars.registerPartial创建部分后，您可以将其包含在类似的模板中：
{{> cardSingle }}
此语法也接受对象参数：
{{> cardSingle objectOfThings }}
所以在您的cards-list.html中，您可以拥有类似的东西：
{{#each data}}
{{> cardSingle this }}
{{/each}}
，您的cardSingle部分可以直接使用this的属性：
<h4>{{title}}</h4>
因此，基本上，您需要在card-single.html中包含部分cards-list.html。为此，您需要首先使用Handlebars.registerPartial注册部分(以下示例中的cards-list(。
这里的挑战是，由于您的部分位于单独的文件中，因此您需要在服务器中运行应用程序(以允许Cross Origin(并使用jQuery get函数访问它，然后注册部分。
我为同一创建了一个" main.js"文件。
main.js
$(document).ready(function() {
var template = Handlebars.compile($("#base-template").html());
$.get('cards-list.html').done(function(text) { //Accessing cards-list.html
Handlebars.registerPartial('cards-list', text); //Registering the partial in the name of `cards-list`
/* Setting the JSON data here*/
var context = {
"data": [
{
"id": "1",
"title": "A",
"img": "imga.jpg",
"url": "card-single.html"
},
{
"id": "2",
"title": "B",
"img": "imgb.jpg",
"url": "card-single.html"
}
]
};
$('#results').html(template(context)); //Rendering the result in the webpage
});
});
和我的'card single.html'看起来像这样。
card-single.html
<html>
<head>
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <!-- Includes jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script> <!-- Includes Handlebars.js -->
<script src="main.js"></script> <!-- Includes main.js -->
</head>
<body>
<div id="results">
<script id="base-template" type="text/x-handlebars-template">
<article class="card card_single-view">
<h4>{{title}}</h4> <!-- This won't print anything unless in an each loop or use {{data.[0].title}} instead-->
{{> cards-list}} <!-- Calling the partial -->
</article>
</script>
</div>
</body>
</html>
最后是您提供的" card-list.html"。
card-list.html
{{#each data}}
<article class="card card_list-view card_list-view--regular">
<picture class="card-image">
<img src="{{root}}/assets/img/{{this.img}}" alt="">
</picture>
<section class="card-section">
<header>
<h3><a href="{{this.url}}">{{this.title}}</a></h3>
</header>
</section>
</article>
{{/each}}
所有这3个文件都在同一目录中，并且当我使用Mac时，我只需要导航到目录并运行命令python -m SimpleHTTPServer 8000即可启动服务器。(对于Windows，我们可以使用Apache Tomcat服务器(。
之后，只需使用URL http://0.0.0.0:8000/card-single.html中的浏览器访问文件。
github链接。希望这会有所帮助。