ractive: No error on wrong section closing tag

Description:

If section closing tag does not correspond to opening, no error appears, section is rendered with value of opening tag.

Versions affected:

Tested only on 0.8.8 and 0.9.0-build-117

Platforms affected:

Tested only on Chrome 57.0.2987.133

Reproduction:

https://jsfiddle.net/1zjyakL0/1/

Code:

new Ractive({
	el: 'body',
    template: 'Start {{ #foo }} Text {{/bar}}',
    data: {
    	'foo': true,
        'bar': false
    }
})

Output is:

Start Text

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 17 (11 by maintainers)

Most upvoted comments

RE expressions in blocks, you get the full monty there. Any expression available anywhere else in the template is available as the target of a {{#...}}, {{#if...}}, {{#with...}}, or {{#each...}}. As for an {{#expr...}} block, we kinda already have that in the form of the if, with, and each blocks. The only difference is that to be exactly equivalent, you’d need to do {{#with ...}}{{#if .}} ... {{/if}}{{/with}} because with is not conditional; it’s only contextual.

For the warning, I’d say only issue it if the mustache is a reference e.g. {{#foo}} or {{#bar.baz}}. If the closing isn’t empty and doesn’t match the reference, issue a warning, otherwise, consider it a comment.

Hello again everyone 😄

@fskreuz You’re a bit nitpicking here my dear 😉

…I think we’re slowly but surely missing the point here. The point would be: “what would be helpful for developers?”. Although I understand both your standpoints, I tend to agree with @Minstel that tag matching definitely is helpful. Once your templates grow, it’s so easy to have misplaced tags. Therefore my +1 vote.

I’m sure almost everyone would already be happy with just a warning, or a stricter version, either way.

Btw, mustache.js & handlebars.js also enforce strict tags matching

Tag matching in Handlebars is possible only because those sections have defined helper names. The same is true with Ractive’s borrowed {{#if}}, {{#each}} and {{#with}}. But for regular sections {{# }} that accept expressions, there is no name, thus no closing name.

Ractive({
  el: 'body',
  template: `
    <div>
      This: {{# [1, 2, 3]:index }} {{index}}: {{this}}, {{/how do you close this?}}
    </div>
    <div>
      Or this: {{# @this.double([1, 2, 3]):index }} {{index}}: {{this}}, {{/how do you close this?}}
    </div>
  `,
  double: n => n.map(o => o * 2)
})

You also do not want Ractive to force you to match the closing with the opening particularly if it’s an expression. That would be a horror show. This would be more inconvenient than than the problem it’s trying to solve.

Ractive({
  el: 'body',
  template: `
    <div>
                                                        <!-- omg, I have to rewrite the entire thing again?! -->
      This: {{# [1, 2, 3]:index }} {{index}}: {{this}}, {{/ [1, 2, 3]:index }}
    </div>
    <div>
                                                                         <!-- no! stahp! nooo!!! -->
      Or this: {{# @this.double([1, 2, 3]):index }} {{index}}: {{this}}, {{/ @this.double([1, 2, 3]):index }}
    </div>
  `,
  double: n => n.map(o => o * 2)
})

The best thing you could do is just add a “comment” that tells you “hey, this is the closing tag for that inline expression opened somewhere up there”. The {{/}} with an optional comment of your liking is sufficient.