Support chained else

[samselikoff]

Is it possible to animate between more than one if-else block, something like a case statement?

I'm essentially trying to replicate the if example from the docs, but with more than two options in the dropdown.

[ef4]

The best way to do this is to string several separate liquid-if's together.

{{#liquid-if firstMode}}
{{/liquid-if}}

{{#liquid-if secondMode}}
{{/liquid-if}}

{{#liquid-if thirdMode}}
{{/liquid-if}}

[samselikoff]

I did this, but maybe I didn't get the transitions right. The content that was transitioning in was coming in from the bottom-right corner. I had something like

{{#liquid-if firstMode class='first-mode'}}
{{/liquid-if}}

{{#liquid-if secondMode class='second-mode'}}
{{/liquid-if}}

{{#liquid-if thirdMode class='third-mode'}}
{{/liquid-if}}

and the transitions

this.transition(
  this.hasClass('first-mode'),
  this.use('toRight'),
  this.reverse('toLeft')
);

this.transition(
  this.hasClass('second-mode'),
  this.use('toRight'),
  this.reverse('toLeft')
);

this.transition(
  this.hasClass('third-mode'),
  this.use('toRight'),
  this.reverse('toLeft')
);

[ef4]

We can take advantage of the new chained else helper support in htmlbars to make this easier.

handlebars-lang/handlebars.js#892

[green-arrow]

@ef4 has anyone given this more thought / worked any on this?

[ef4]

We haven't made any new progress on this. Would be happy to support someone with time to experiment.

[Cryrivers]

i think now you can just use normal {{#if }} {{else if}} {{else}} in a liquid-bind block

[ef4]

You can, and that works well for many use cases, but it's not exactly the same as what a full liquid-each could do.