Feature Request: Else conditional support

[dak]

Incremental-DOM appears to fully support if/else conditionals, but superviews.js at the moment only allows for if conditionals.

[davidjamesstone]

Yes - this is on the todo list.

I'm not sure how to approach it with attributes.

    <!-- Use an `if` attribute for conditional rendering. Not sure how to extend this to include an 'else' -->
    <p if="data.showMe">
      <span class="{data.bar + ' other-css'}">description</span>
      <input type="text" disabled="{data.isDisabled}">
    </p>

    <!-- An `if` tag can also be used for conditional
     rendering by adding a `condition` attribute. -->
    <if condition="data.showMe">
      I'm in an `if` block.
    </if>

Maybe implementing a switch-case block would be better?

[dak]

I've found myself usually resorting to using the ternary conditional operator for logic in attributes, which is a little messy, or handling the logic in the model, which can lead to models getting rather overpopulated with state booleans. I'm not sure this is easily solvable with the available syntax though.

The nicest thing would probably be something akin to what Handlebars does, but I suspect that would require you to write your own parser, rather than relying on htmlparser2, which is probably out of scope for now.

If/Else blocks though do come up fairly frequently, and would probably be a fairly straightforward

<if condition="value">
  // true
<else>
  // false
</if>

A switch-case block would be interesting, although most use cases I've been able to think of result in a lot of duplicate HTML being used, and would be better written just using variables inside a single HTML block. I don't see any reason not to implement them if you have the time though.

[davidjamesstone]

I think this could be achieved within htmlparser, I'll do some investigation.

Maybe even take it one step further:

<if condition="value">
  //
<elseif condition="foo">
  //
<elseif condition="bar">
  //
<else>
  // default
</if>

In the meantime, this ugliness is always an option:

<script>if (condition) {</script>
  <div>foo</div>
<script>} else if (condition) {</script>
  <div>bar</div>
<script>}</script>

[davidjamesstone]

50e48aec46892c6061d7197d14374032a0131b1f