Ractive section start and end tag in different block

Question

We have RactiveJS templates that are creating in CKEditor, which outputs this

<p>Can you see it?</p>
<p>{{# visible }}</p>
<p>Now you see me</p>
<p>{{/ visible }}</p>

This used to work in Ractive v0.4, but gives a parse error in the latest version.

It seems like having a start and end tag of a section in a different HTML block no longer works.

Is there any way around this, without having to change the templates?

---

• Works in v0.4: https://jsfiddle.net/a243vsdx/1/
• Does not work in v0.8: https://jsfiddle.net/a243vsdx/

---

Updated to clarify the question:

• This was working in v0.4.x. What changed causing this to no longer function? Can you point out the line(s) in the source code?
• What alternative libraries could I use that do work parse mustache as expected and have two-way binding.

Answer 1

There's not really a way around this without changing the template. The parser has gotten a bit more strict over the last few versions because of confusing scenarios like this one, which doesn't result in the structure that it appears to. In this case, you get some extra, nested p tags, which isn't particularly harmful, but in other cases it is. So what you effectively have there in 0.4 is:

<p>Can you see it?</p>
<p>
  {{# visible }}
    <p></p>
    <p>Now you see me</p>
    <p></p>
  {{/ visible }}
</p>

Ractive 0.8 (and I think 0.5+, but definitely 0.7+) follows along until the </p> after the open of the block, where it sees the closing tag for an element that isn't open and throws an error. Ractive has never supported blocks spanning tags because there's no way to represent that in the VDOM, which is a strict tree structure.

Answer 2

<p>Can you see it?</p>
<p>{{# visible }}</p>
<p>Now you see me</p>
<p>{{/ visible }}</p>

The root problem is probably because your CKEditor configuration is taking the input as rich text and your system is emitting it as markup. What the author of the content probably meant was the following (seen as-is on a WYSIWYG editor), which makes total sense:

Can you see it?
{{# visible }}
Now you see me
{{/ visible }}

I would highly suggest checking your WYSIWYG configuration first, and have your editors edit and save plain text. Then redo any data that have been entered in this manner. There's no way around it from the Ractive side since essentially, the markup is a malformed template. 0.4 just wasn't strict enough to catch this.

It's also worth noting that Ractive represents templates as a tree. Despite using a mustache-like template syntax, it's not doing string interpolation/concatenation like the actual Mustache library.