Question

我有一个包含社交按钮信息的数组（href，alt，img）。我创建了一个部分循环数组并添加对象，这就是我所拥有的。

数组：

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"
    }
];

模板：

social_partial = '<a href="{{url}}" alt="{{alt}}"><img src="{{image}}"/></a>';

部分功能：

Handlebars.registerPartial('addSocial',social_partial);

和主要模板：

<div class="tip_social">
    {{>addSocial social}}
</div>

我得到'Depth0是未定义的错误'。我尝试寻找有关获得不同背景的parials的文档，但我还没有找到它。

编辑 here是一个更完整的小提琴

Answer 1

对我来说同样的问题。稍后我会发现一点挖掘和一个面掌。

tl;博士回答

非常小心您传递给partial的上下文。如果以某种方式将null或空对象传递给部分，则会出现depth0 is undefined错误

答案非常长

JSFiddle示例：

depth0 bug被触发http://jsfiddle.net/paulcollinsiii/dAmfc/
工作版http://jsfiddle.net/paulcollinsiii/sMAkT/

在工作版本中唯一改变的是我将有效的上下文传递给部分。

BTW一个非常有用的技巧是使用this blog

中的调试助手

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>

上面破碎的上下文会导致把手死亡。对于您的问题，请尝试使用{{debug}}标记进行挖掘，看看是否有帮助。

有关更好的代码示例，请查看jsFiddles。在这里重新发布所有代码，格式化它以使其看起来非常漂亮并且使得StackOverflow的回答独裁者独立快乐对于在工作中做这件事有点多了^ _~

Answer 2

由于您没有提供足够的代码来复制问题，我不确定您做错了什么。但是，要使其发挥作用并不难。首先，你的主模板应该迭代social并将每个元素提供给你的部分，如下所示：

<script id="t" type="text/x-handlebars-template">
    {{#each social}}
        <div class="tip_social">
            {{>addSocial this}}
        </div>
    {{/each}}
</script>

然后您可以使用以下内容获取HTML：

var t    = Handlebars.compile($('#t').html());
var html = t({social: social}));

演示：http://jsfiddle.net/ambiguous/SsdbU/1/

Answer 3

这是我发现的唯一方法： Handlebars doc表示您需要使用Block Helpers来传递不同的上下文。所以这里有两个文件：主模板和节点中的脚本争用两个上下文：主要上下文和社交数据的上下文。该脚本具有部分模板的源。 Block是#twitter_list，其关联的registerHelper使用option.fn（other_context_object），这似乎是在把手中传递另一个上下文的唯一方法。

主要模板：

<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>

使用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)
});

车把局部背景

3 个答案:

tl;博士回答

答案非常长

JSFiddle示例：

Answerbot独裁者“代码示例”