BlueBarren BlueBarren - 3 months ago 10
ASP.NET (C#) Question

Mustache Boolean Structure Working Only in One Place

I'm using mustache's boolean tag system to apply colours to some text. I have managed to get it working in one place:

{{#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}}


What happens here is that when a
BooleanScore
hasn't been answered it says N/A in the colour grey. Once you have answered a question it will be either yes or no depending on what you select. Along with the text the colour changes as well; a yes will always be green and a no can either be yellow or red but not both. This is determined in the SQL where if it has a
YellowScore
red will be null and vice versa. When a colour isn't null the Boolean should be true and the other false, hence the logic works in the first example.

I tried to use the same logic in the same file just within a different div but for some reason the logic won't persist.

{{#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}}


For some reason it's probably seeing both
YellowScore
and
RedScore
as false and showing neither then putting a bunch of line breaks around the
Green: {{Green}}


This is what is currently happening, only green is showing with a series of line breaks around it

enter image description here

versus what it looked like before, the reason I need to change it is because it did not support a
YellowScore


enter image description here

Update:

After some tinkering over the last couple of days I've managed to sort of improve the situation. I can now get both a green and red or a green and yellow "scoring" to show up at the same time. The problem is it based off of what the user changes the score to. That portion is supposed to be static letting them know what scores are available to them. Hopefully the pictures bellow help explain what I'm talking about.

If the score is set to yes (which is green):

enter image description here

If the score is set to no (and it's yellow):

enter image description here

If the score is set to no (and it's red):

enter image description here

So the problem now is that the Scoring is based off of the user score and is not static. Basically in the green scenario I need to what the no option is whether it's yellow or red.

The current state of my mustache code is as follows:

{{#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}}


An interesting point to note is that the
<div>
separating the yellow and red score from the green is what allows this happen. Something I just noticed is that it only works as listed above once the application is published on the server not when I'm running locally.

Answer

I finally found the solution to my problem. The issue was that instead of checking my colourScore tags I should have just been checking whether my colour tags were true or false. So instead of {{#YellowScore}} or {{#RedScore}} I should have just been checking {{#Yellow}} and {{#Red}}

The code now looks like this:

{{#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}}