Mustache 布尔结构只能在一个地方工作

Question

我正在使用 mustache 的布尔标记系统将颜色应用于某些文本。我设法让它在一个地方工作：

{{#BooleanScore}}
    <span class="score booleanScore 
          {{#Unanswered}}
              unansweredScore
          {{/Unanswered}}" 
          style="{{#Unanswered}}
              color:grey;
          {{/Unanswered}}
          {{^Unanswered}}
              color:{{ScoreColor}}
          {{/Unanswered}}">
          {{#Unanswered}}
              N/A
          {{/Unanswered}}
          {{^Unanswered}}
              {{#GreenScore}}
                  YES
              {{/GreenScore}}
              {{#YellowScore}}
                  NO
              {{/YellowScore}}
              {{#RedScore}}
                  NO
              {{/RedScore}}
          {{/Unanswered}}
    </span>
    <span class="boxEmphasis weightHolder">
        <span class="timesSign">
          x
        </span>
        <span class="weight">
          {{Weight}}
        </span>
    </span>
{{/BooleanScore}}

这里发生的事情是，当 BooleanScore 没有被回答时，它会以灰色显示 N/A。一旦你回答了一个问题，它要么是要么不是，这取决于你select。颜色也会随着文本的变化而变化； yes 永远是绿色，no 可以是黄色或红色，但不能两者兼而有之。这是在 SQL 中确定的，如果它有 YellowScore 红色将为空，反之亦然。当颜色不为 null 时，布尔值应该为 true，另一个为 false，因此逻辑在第一个示例中有效。

我试图在不同 div 中的同一文件中使用相同的逻辑，但由于某种原因，逻辑不会持续存在。

{{#BooleanScore}}
      <div style="color:green;">
        Green: {{Green}}
      </div>
      {{#YellowScore}}
        <div style="color:orange;">
          Yellow: {{Yellow}}
        </div>
      {{/YellowScore}}
      {{#RedScore}}
        <div style="color:red;">
          Red: {{Red}}
        </div>
      {{/RedScore}}
{{/BooleanScore}}

出于某种原因，它可能将 YellowScore 和 RedScore 都视为 false 并且两者都不显示，然后在 Green: {{Green}}

周围放置一堆换行符

这是当前发生的情况，只显示绿色，周围有一系列换行符

与之前的样子相比，我需要更改它的原因是它不支持 YellowScore

更新：

经过过去几天的一些修补，我设法改善了这种情况。我现在可以同时显示绿色和红色或绿色和黄色 "scoring"。问题是它基于用户将分数更改为什么。该部分应该是静态的，让他们知道他们可以获得哪些分数。希望下面的图片有助于解释我在说什么。

如果分数设置为是（绿色）：

如果分数设置为否（且为黄色）：

如果分数设置为否（且为红色）：

所以现在的问题是评分是基于用户分数而不是静态的。基本上在绿色场景中我需要什么选项是黄色还是红色。

我的小胡子代码的当前状态如下：

{{#BooleanScore}}
    <div style="color:green;">
      Green: {{Green}}
    </div>
    <div>
      {{#YellowScore}}
        <div style="color:orange;">
           Yellow: {{Yellow}}
        </div>
      {{/YellowScore}}
      {{#RedScore}}
        <div style="color:red;">
          Red: {{Red}}
        </div>
      {{/RedScore}}
    </div>
{{/BooleanScore}}

值得注意的一点是，<div> 将黄色和红色分数与绿色分开是导致这种情况发生的原因。我刚刚注意到的是，只有当应用程序在服务器上发布时，它才会像上面列出的那样工作，而不是当我在本地运行时。

Answer 1

我终于找到了解决问题的方法。问题在于，我不应该检查我的 colourScore 标签，而应该检查我的颜色标签是真还是假。所以我应该检查 {{#Yellow}} 和 {{#Red}}

而不是 {{#YellowScore}} 或 {{#RedScore}}

代码现在看起来像这样：

{{#BooleanScore}}
    <div style="color:green;">
      Green: {{Green}}
    </div>
    <div>
      {{#Yellow}}
        <div style="color:orange;">
           Yellow: {{Yellow}}
        </div>
      {{/Yellow}}
      {{#Red}}
        <div style="color:red;">
          Red: {{Red}}
        </div>
      {{/Red}}
    </div>
{{/BooleanScore}}

Mustache 布尔结构只能在一个地方工作

Mustache Boolean Structure Working Only in One Place

html

asp.net

mustache