Closed xaja closed 5 years ago
Hi @xaja, thanks for the question! Would you mind providing me with the template and/or data you're using?
One thing I did notice is that {{if(data.length > 1)}}
should probably be {{if(options.data.length > 1)}}
hm, while i prepare demo, i figure strange situation:
demo 1: https://jsfiddle.net/f40yrv81/ no errors (all data printed)
demo 2: now i add if > 1
https://jsfiddle.net/f40yrv81/1/ everything is broken
demo 3: now i add Comments to lines with this if
https://jsfiddle.net/f40yrv81/2/ and it print only first item (as i want).
Is this how it should work?
Hi @xaja, I think I've found the problem. The HTML parser thinks that the <
in {{if(@index < 1)}}
is the first part of a closing </template>
tag. When you add HTML comments around the tag, it solves that problem, and Squirrelly doesn't care about HTML-style comments. If you 'Inspect Element', you can see the resulting HTML is:
<div class="result">
<!-- -->
<div class="block">
<div class="block__title">Title 1</div>
<div class="block__text">Text 1</div>
</div>
<!-- -->
<!-- -->
<!-- -->
<!-- -->
</div>
Squirrelly renders the <!--
and the -->
, which are outside of the {{if()}}
, for each item of the data.
When you change the render to:
result = Sqrl.Render(testTemplate, {
data: data,
lessThan: function(first, second) {
if (first < second) {return true}
return false}
});
It works.
Does this solution work for you? Otherwise, you'll need to write your template inside of a JS string, like: https://jsfiddle.net/rfLth8bn/6/
situation with <!-- -->
is ok for me, but thanks for another examples!
i think it's a good idea to add in Docs some info from this issue.
great product, thanks again!
Thanks @xaja, I'll certainly add that to the docs.
You're welcome, and let me know if you have any more questions!
So, this is working:
{{if(@index === 1)}}
But this not:
{{if(@index > 1)}}
And like this also not working:
{{if(data.length > 1)}}