如何使用 musatche 模板呈现线程评论？

【问题标题】：How to render threaded comments using musatche templates?如何使用 musatche 模板呈现线程评论？
【发布时间】：2012-11-04 15:24:47
【问题描述】：

我正在尝试为我正在构建的类似博客的系统实现线程化 cmets。评论可能如下所示（JavaScript）：

{
    text: "whatever",
    author : "name"
    children: [ /* more comments*/ ]
}

请注意，子 cmets 自己可能有子代。

我有一个小胡子模板，如下所示：

{{#comments}}
    <li><div class='comment'>
        {{author}} wrote {{text}}
    </div></li>
{{/comments}}

有什么方法可以使用这个方案渲染线程化的 cmets 吗？小胡子没有逻辑意味着我不能用它来实现这样的东西吗？

FWIW 我正在使用mote.js 库来渲染模板。

【问题讨论】：

标签： javascript mustache

【解决方案1】：

这非常适合分部。所以你的页面模板看起来像这样：

...

<ul>
  {{# comments }}
    {{> comment }}
  {{/ comments }}
</ul>

...

你的 cmets 部分看起来像这样：

<li>
  <div class="comment">

    ... commentystuff

    <ul>
      {{# children }}
        {{> comment }}
      {{/ children }}
    </ul>
  </div>
</li>

而且由于看起来您使用的是 JS，如果没有子 cmets，您甚至可以有条件地隐藏整个嵌入式 UL，只需将其包装在 {{# children.length }} 部分中即可：

<li>
  <div class="comment">

    ... commentystuff

    {{# children.length }}
      <ul>
        {{# children }}
          {{> comment }}
        {{/ children }}
      </ul>
    {{/ children.length }}
  </div>
</li>

【讨论】：

看起来很棒！我会试试这个，让你知道。谢谢。