javascript 车把部分上下文
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11839633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
handlebars partial context
提问by alexdmejias
I have an array that contains the information for social buttons (href,alt,img). I created a partial that would cycle through the array and add the objects, here is what I have.
我有一个包含社交按钮信息的数组（href、alt、img）。我创建了一个可以循环遍历数组并添加对象的部分，这就是我所拥有的。
the array:
数组：
var social=[
{
"url":"http://twitter.com/share?text="+encodeURIComponent(this.title)+" "+encodeURIComponent('#grnsrve')+"&url="+domain+"&via="+twitterAcct,
"image":"IMG/media/twitter_16.png",
"alt":"twitter link"
},
{
"url":"http://twitter.com/share?text="+encodeURIComponent(this.title)+" "+encodeURIComponent('#grnsrve')+"&url="+domain+"&via="+twitterAcct,
"image":"IMG/media/twitter_16.png",
"alt":"twitter link"
},
{
"url":"http://twitter.com/share?text="+encodeURIComponent(this.title)+" "+encodeURIComponent('#grnsrve')+"&url="+domain+"&via="+twitterAcct,
"image":"IMG/media/twitter_16.png",
"alt":"twitter link"
}
];
The template:
模板：
social_partial = '<a href="{{url}}" alt="{{alt}}"><img src="{{image}}"/></a>';
The partial function:
偏函数：
Handlebars.registerPartial('addSocial',social_partial);
and the main template:
和主模板：
<div class="tip_social">
{{>addSocial social}}
</div>
I'm getting a 'Depth0 is undefined error'. I tried looking for documentation on parials getting a different context , but I have yet to find it.
我收到“Depth0 未定义错误”。我尝试寻找有关 parials 获取不同上下文的文档，但我还没有找到。
edithereis a more complete fiddle of it
在这里编辑是一个更完整的小提琴
回答by Paul
Same issue for me. Bit of digging and one face-palm later here's what I've found.
对我来说同样的问题。一点点挖掘和一个面部手掌，这就是我发现的。
tl;dr answer
tl;博士回答
Be verycareful about the context you pass to your partial. If you somehow pass a null, or empty object to your partial you'll get the depth0 is undefinederror
对传递给局部的上下文要非常小心。如果您以某种方式将 null 或空对象传递给您的部分，您将收到depth0 is undefined错误
Very slightly longer answer
稍微长一点的答案
JSFiddle Examples:
JSFiddle 示例：
- depth0 bug gets triggered http://jsfiddle.net/paulcollinsiii/dAmfc/
- working version http://jsfiddle.net/paulcollinsiii/sMAkT/
The only thing that changed in the working version is I'm passing a valid context to the partial.
在工作版本中唯一改变的是我将有效的上下文传递给部分。
BTW a very helpful trick is to use the debug helper from this blog
顺便说一句，一个非常有用的技巧是使用此博客中的调试助手
Answerbot dictator "code example"
Answerbot独裁者“代码示例”
<script id="parent">
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
{{#each collection}}
{{>myPartial nothingHere}} <!-- Broken context -->
{{/each}}
</tbody>
</table>
</script>
The broken context above will cause handlebars to die. For your problem try digging into that with a {{debug}}tag and see if that helps.
上面破碎的上下文将导致把手死亡。对于您的问题，请尝试使用{{debug}}标签深入研究，看看是否有帮助。
For a better code example please just take a look at the jsFiddles. Reposting all the code in here, formatting it to make it pretty looking and making the StackOverflow answerbot dictator happy was a bit much for doing this at work ^_~
有关更好的代码示例，请查看 jsFiddles。在此处重新发布所有代码，对其进行格式化以使其看起来更漂亮并使 StackOverflow answerbot 独裁者感到高兴对于在工作中执行此操作有点过分了^_~
回答by mu is too short
I'm not sure what you're doing wrong as you haven't provided enough code to duplicate your problem. However, it isn't hard to make it work. First of all, your main template should be iterating over socialand feeding each element to your partial, something like this:
我不确定你做错了什么，因为你没有提供足够的代码来复制你的问题。然而，让它发挥作用并不难。首先，您的主模板应该迭代social并将每个元素提供给您的部分，如下所示：
<script id="t" type="text/x-handlebars-template">
{{#each social}}
<div class="tip_social">
{{>addSocial this}}
</div>
{{/each}}
</script>
And then you can get your HTML with something like this:
然后你可以用这样的东西来获取你的 HTML：
?var t = Handlebars.compile($('#t').html());
var html = t({social: social}));??
回答by isacookie
Here is the only way I found: Handlebars doc indicates that you need to use Block Helpers to pass different contexts. So here are two files: the main template and the script in node contening two contexts: the main context and the context for the social data. The script having the source for the partial template. The Block is #twitter_list and its associated registerHelper uses option.fn(other_context_object) which seems the only way to pass another context in handlebars.
这是我发现的唯一方法： Handlebars doc 表明您需要使用 Block Helpers 来传递不同的上下文。所以这里有两个文件：主模板和节点中的脚本，它们包含两个上下文：主上下文和社交数据的上下文。具有部分模板源的脚本。Block 是 #twitter_list 及其关联的 registerHelper 使用 option.fn(other_context_object) 这似乎是在把手中传递另一个上下文的唯一方法。
Main template:
主要模板：
<html>
<head>
<title>Test content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id = main>
<!-- This is using the main context-->
<h2> Hello {{name}}!</h2>
<p>{{some_content}}</p>
<!-- This is using the partial template and its own context -->
<ul>
{{#twitter_list}}
{{>yourpartial}}
{{/twitter_list}}
</ul>
</div>
</body>
</html>
The javascript using Node js:
使用 Node js 的 javascript：
var handlebars = require('handlebars'),
fs = require('fs');
const main_context = { name: "world",
some_content: "Bla bla bla all my bla bla"};
const twitter_data={social:[
{
"url":"some url 1",
"image":"IMG/media/twitter_1.png",
"alt":"twitter link 1"
},
{
"url":"some url 2",
"image":"IMG/media/twitter_2.png",
"alt":"twitter link 2"
},
{
"url":"some url 3",
"image":"IMG/media/twitter_3.png",
"alt":"twitter link 3"
}
]};
var partial_source = '{{#each social}}<li><a href="{{url}}" alt="{{alt}}"><img src="{{image}}"/></a></li>{{/each}}';
handlebars.registerPartial('yourpartial', partial_source);
handlebars.registerHelper('twitter_list', function(options) {
//you need to use the options.fn to pass the specific context
return options.fn(twitter_data);
});
fs.readFile('maintemplate1.hbs', 'utf-8', function(error, source){
var template = handlebars.compile(source);
var html = template(main_context);
console.log(html)
});
