Always need to set delimiters in custom render(text) function blocks

[ghost]

I have a template code

{{=<. .>=}}
<.#post.>
<div class="post <.type.>">
    <.#show_high_res.>
        <.#photoset_images.>
            <.#highres.>
                <.#insert_image.>
                    <.&permalink.>
                <./insert_image.>
            <./highres.>
        <./photoset_images.>
    <.#show_high_res.>
</div>
<./post.>

And it outputs <.&permalink.> as <.&permalink.> - it doesn't change the variable to a value.

Then I noticed if I write {{permalink}} instead, it changes the variable with the value assigned in the JS object.

{{=<. .>=}}
<.#post.>
<div class="post <.type.>">
    <.#show_high_res.>
        <.#photoset_images.>
            <.#highres.>
                <.#insert_image.>
                    {{&permalink}}
                <./insert_image.>
            <./highres.>
        <./photoset_images.>
    <.#show_high_res.>
</div>
<./post.>

Then I tried setting the delimiter inside <.#insert_image.> block and it finally rendered with a value instead of the variable name.

{{=<. .>=}}
<.#post.>
<div class="post <.type.>">
    <.#show_high_res.>
        <.#photoset_images.>
            <.#highres.>
                <.#insert_image.>
                    {{=<. .>=}}
                    <.&permalink.>
                <./insert_image.>
            <./highres.>
        <./photoset_images.>
    <.#show_high_res.>
</div>
<./post.>

Sorry, I forgot to add my render(text) code. It might be that I just misunderstood and did something wrong.

"insert_image" : function () {
    return function (text, render) {
        return '<a href="'+render(text)+'" class="photo_link" style="padding-top: calc(100% * '+this.height+' / '+this.width+');"><img src="'+this.url+'"></a>';
}

I'm using the 2.1.3 version. Is this normal behavior or is it a bug?

[dasilvacontin]

Looks like a bug to me. Need someone to confirm the behaviour, or send in a PR with a failing test. (or both the test and the fix) 😄

[ghost]

I updated my issue with some extra code. It might be that I just misunderstood something while writing the function but it seemed pretty straightforward on the Readme.md

"insert_image" : function () {
    return function (text, render) {
        return '<a href="'+render(text)+'" class="photo_link" style="padding-top: calc(100% * '+this.height+' / '+this.width+');"><img src="'+this.url+'"></a>';
}

[dasilvacontin]

Yep, I see the reason why this happens. It happen when using lambdas (like your case) and partials (I think), due to that section of the template being parsed again.

Thanks for the additional info!

[vgel]

I was able to get this issue into a workable test case:

opts = {
    val: 'hello world',
    func: function () {
        return function(text, render) { return '!!' + render(text) + '!!'}
    }
}
m.render('{{=<% %>=}} <%#func%> <%val%> <%/func%>', opts) // returns ' !! <%val%> !!' instead of ' !! hello world !!'

I'm working on a fix for it now.