ractivejs/ractive

Open and close link tags don't work in separate conditional sections

Closed this issue · 3 comments

The goal is to have a chunk of markup to be a link if a certain condition is met. This:

{{#blob}}
    {{#if foo.bar}}
        <a href="X">
    {{/if}}
    Markup here
    {{#if foo.bar}}
        </a>
    {{/if}}
{{/blob}} 

results in an error:

ParseError: Attempted to close a section that wasn't open at line X character Y:
        {{/blob}}

The markup section is a complex piece of HTML so I had to create a partial for it to work around this issue:

<script id="markup_internal" type='text/ractive'>
    Markup here
</script>
{{#blob}}
    {{#if foo.bar}}
        <a href="X">{{>markup_internal}}</a>
    {{else}}
        {{>markup_internal}}
    {{/if}}
{{/blob}}

That's the correct approach using the partials.

Because Ractive is creating a tree representation and not a string, it doesn't support the conditionally split element.

I've added an issue to the docs.

Thanks for the clarification. If it comes up often, as you write, then perhaps it would be good to detect this situation and provide an informative error message? Something as simple as 'Conditionally split elements are not supported. See http://docs.ractivejs.org/blah for more information". The current error suggests there is a bug in Ractive for someone not familiar with its internals.

We actually have an issue open here for that right now :)

EDIT: Oops, wrong issue! I can't find the correct one but I assure you it exists!