如何使用胡子模板呈现线程注释?

时间:2012-11-04 15:24:47

标签: javascript mustache

我正在尝试为我正在构建的类似博客的系统实现线程注释。评论可能看起来像这样(JavaScript):

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

请注意,儿童评论本身可能有孩子。

我有一个小胡子模板,如下所示:

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

我是否可以使用此方案呈现线程评论?小胡子是无逻辑的意味着我不能使用它来实现这样的东西吗?

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

1 个答案:

答案 0 :(得分:1)

这非常适合偏爱。所以你的页面模板看起来像这样:

...

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

...

你的评论部分看起来像这样:

<li>
  <div class="comment">

    ... commentystuff

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

由于看起来你正在使用JS,如果没有子注释,你甚至可以有条件地隐藏整个嵌入式UL,只需将其包装在{{# children.length }}部分:

<li>
  <div class="comment">

    ... commentystuff

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