squirrellyjs / squirrelly

Semi-embedded JS template engine that supports helpers, filters, partials, and template inheritance. 4KB minzipped, written in TypeScript ⛺
https://squirrelly.js.org
MIT License
592 stars 82 forks source link

"IF greater than" not working #116

Closed xaja closed 5 years ago

xaja commented 5 years ago

So, this is working:

{{if(@index === 1)}}

But this not:

{{if(@index > 1)}}

And like this also not working:

{{if(data.length > 1)}}

nebrelbug commented 5 years ago

Hi @xaja, thanks for the question! Would you mind providing me with the template and/or data you're using?

nebrelbug commented 5 years ago

One thing I did notice is that {{if(data.length > 1)}} should probably be {{if(options.data.length > 1)}}

xaja commented 5 years ago

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?

nebrelbug commented 5 years ago

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.

nebrelbug commented 5 years ago

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.

nebrelbug commented 5 years ago

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/

xaja commented 5 years ago

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!

nebrelbug commented 5 years ago

Thanks @xaja, I'll certainly add that to the docs.

You're welcome, and let me know if you have any more questions!