Ractive conditional statements works unstable

Question

This is not working as expected:

  <!-- {{>io_cmd_button}} -->      
    {{#if (button.type === 'output')}}
        {{#button.pins}}
        <div style="width: 40%; margin: 10px; border: 1px solid yellowgreen; padding: 20px">
          <p> RPi led: <input id='rpi-command-{{button.type}}' type="checkbox"  value="{{.}}" />    
        </div>
        {{/button.pins}}
    {{else}}
        <h3> this is input pin, only status will be shown </h3>
    {{/if}}
  <!-- {{/io_cmd_button}} -->

By negating the condition and swap the bodies of if/else blocks, the same logic remains, the code becomes as follows and works as expected:

  <!-- {{>io_cmd_button}} -->      
    {{#if (button.type !== 'output')}}
        <h3> this is input pin, only status will be shown </h3>
    {{else}}
        {{#button.pins}}
        <div style="width: 40%; margin: 10px; border: 1px solid yellowgreen; padding: 20px">
          <p> RPi led: <input id='rpi-command-{{button.type}}' type="checkbox"  value="{{.}}" />    
        </div>
        {{/button.pins}}
    {{/if}}
  <!-- {{/io_cmd_button}} -->

Why? What is different?

Answer 1

As answered here, I was missing the closing tag of p. Fixing html solved the issue. We are now looking forward to have better error messages of Ractive.