3

我有一个包含社交按钮信息的数组（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>

我收到“深度 0 未定义错误”。我尝试寻找有关 parials 获得不同上下文的文档，但我还没有找到它。

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

4

3 回答 3

8

对我来说同样的问题。一点点挖掘和后来的一个手掌，这就是我发现的。

tl;博士回答

对于传递给局部的上下文要非常小心。如果您以某种方式将 null 或空对象传递给您的部分，您将收到depth0 is undefined错误

答案稍长

JSFiddle 示例：

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

顺便说一句，一个非常有用的技巧是使用此博客中的调试助手

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 answerbot 独裁者感到高兴，这对于在工作中执行此操作有点多 ^_~

于 2012-10-22T22:49:45.343 回答
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/

于 2012-08-07T06:38:08.233 回答
0

这是我找到的唯一方法：Handlebars doc 表明您需要使用 Block Helpers 来传递不同的上下文。所以这里有两个文件：主模板和节点中的脚本包含两个上下文：主上下文和社交数据的上下文。具有部分模板源的脚本。该块是#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)
});
于 2018-05-11T17:28:35.330 回答