避免模​​板代码冗余

Question

我主要是网络开发和javascript / nodejs / expressjs的初学者，我一直面临一个困扰我好几个月的问题，我找不到既不太复杂的解决方案或者太乱了;在视图中我有3帧，在这三个帧中，我需要列出一个对象数组，这些对象具有相同的数据结构，但是具有不同的值，我需要根据它们的值突出显示某些对象使用html，当时我正在使用jade，重复同样的“if ... else ... case ...”链三次，我尝试切换到车把/ hogan.js并过滤数据添加在渲染之前每个案例的特定html结构但是我最终创建了另一个混乱，因为我仍然处于应用程序前端的早期开发，因此我快速更改了视图的视觉效果，这使得它变得相当困难和令人困惑。使用小胡子（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支持查看部分内容，考虑将您的常用标记拉入其中一个或多个。