避免模​​板代码冗余

Question

我主要是 web 开发和 javascript/nodejs/expressjs 的初学者，我一直面临一个困扰我几个月的问题，我找不到一个不太复杂的解决方案或者太乱；在视图中我有 3 个框架，在这三个框架中，我需要列出一个对象数组，这些对象对所有三个具有相同的数据结构但具有不同的值，我需要根据它们的值突出显示某些对象使用 html，当时我正在使用玉，重复相同的“if ... else ... case ...”链三遍，我尝试切换到 handlebars/hogan.js 并过滤数据添加在渲染之前为每个案例提供特定的 html 结构，但我最终创建了另一个混乱，使得在快速更改视图的视觉效果时变得相当困难和混乱，因为我仍处于应用程序前端的早期开发阶段，那会是什么使用 mustache(hogan)/handlebars/jade 完成任务的最简单方法/方法？

我在玉中遭受的冗余示例； （在原始代码中还有更多的 if...else... 以及更大的 html 结构）

div(class='frame red'
    for object in array
        if object.annex
            case object.annex.type
                when 1
                    i object.annex.text
                when 2
                    b object.annex.text
                when 3
                    span(class='normal') object.annex.text
        else
            case object.type
                when 1
                    i object.text
                when 2
                    b object.text
                when 3
                    span(class='normal') object.text

div(class='frame blue')
    for object in array
        if object.annex
            case object.annex.type
                when 1
                    i object.annex.text
                when 2
                    b object.annex.text
                when 3
                    span(class='normal') object.annex.text
        else
            case object.type
                when 1
                    i object.text
                when 2
                    b object.text
                when 3
                    span(class='normal') object.text

Answer 1

用dust.js这样称呼它；

<div class='frame red'>

  {#array}

    {#annex}

      {>"partials/object"/}
    {/annex}

    {>"partials/object"/}
  {/array}

</div>

<div class='frame blue'>

  {#array}

    {#annex}

      {>"partials/object"/}
    {/annex}

    {>"partials/object"/}
  {/array}

</div>

partials/object.dust 中的逻辑；

{@select key=type}

  {@eq value=1}
    <i>{text}</i>
  [/eq}

  {@eq value=2}
    <b>{text}</b>
  {/eq}

  {@default} // when type is null
    <span>{text}{?isAnnex}, annex.{/isAnnex}</span>
  {/default}

{/select}

Answer 2

Jade 支持部分视图，请考虑将常用标记拉入其中一个或多个。