0

我正在使用 Handlebars.js 和http://pragmaticly.github.com/smart-time-ago/

我有这个工作：

<time class="timeago" datetime="2012-07-18T07:51:50Z"></time>

在这里演示：演示

但是当我在这里看到的把手逻辑中添加时间时......

<div id="handlebarsPlaceholder">This will get replaced by handlebars.js</div>
    <script id="aaronsTemplate" type="text/x-handlebars-template">
        {{#messages}}
         <li>
            <a href="#messageID{{messageID}}">
                <time class="timeago" datetime="2012-07-18T07:51:50Z"></time>
                <strong>{{from}}</strong><br/>
                {{subject}}
            </a>
         </li>
        {{/messages}}
        </script>
    </ul>
</div>

...这没用。

我错过了什么或者有一篇文章可以引导我找到答案？我在谷歌上到处搜索，但一定没有正确的搜索词。

谢谢！

4

1 回答 1

2

您的$('.timeago').timeago()调用不会在 a 中找到东西，<script type="text/x-handlebars-template">因为它<script>不包含 HTML（这就是我们特别不在type="text/html"模板容器上使用的原因）。

您需要做的就是调用.timeago()通过填写模板获得的 HTML；像这样的东西：

var t = Handlebars.compile($('#aaronsTemplate').html());
$('#handlebarsPlaceholder').html(t({ ... });
$('#handlebarsPlaceholder .timeago').timeago();

最后一行是你所缺少的。

此外，您的 HTML 有点偏离，您有一个迷路</div>并且您<ul>在模板中缺少一个开口；你应该有更多这样的东西：

<div id="handlebarsPlaceholder">This will get replaced by handlebars.js</div>
<script id="aaronsTemplate" type="text/x-handlebars-template">
    <ul>
        {{#messages}}
            <li>
                <!--... -->
            </li>
        {{/messages}}
    </ul>
</script>

演示（带有精简模板）：http: //jsfiddle.net/ambiguous/89Bwx/1/

于 2012-10-17T16:44:05.757 回答