Ractive recursive partials with couter

Question

I had some problem when I used recursive partials. I tried to create comments which every one can comment again, like this:

comment (depth 0)
  comment (depth 1)
    comment (depth 2)

I want to add some special classes for different depth of comments

 {{#messages}}
      {>message}
    {{/messages}}
    <!-- {{>message}} -->
    <div class="{{getClasses()}}"">{{text}}</div>
      {{incrDepth()}}

      {{#comments}}
        {{>message}}
      {{/comments}}

      {{decrDepth()}}
    <!-- {{/message}} -->

This is additional function which I use

{
  data: {
    incrDepth: function () {
      this.depth++;
    },

    decrDepth: function () {
      this.depth--;
    },

    getClasses: function () {
      return 'depth' + this.depth;
    }
  }
}

So, before every comments I increase depth and after comments I decrease it. But unfortunately all my invokes of getClasses() return 'depth0' and I can't understand why.

Answer 1

It helps if you think of templates as being read-only - rather than 'executing' the template from top to bottom, Ractive constructs a virtual DOM from the template, and updates nodes within it whenever they need to change. For that reason, there's no guarantee about when a given function will be called.

So you should avoid functions with 'side-effects' - they should be for retrieving data, never setting it.

But a recursive structure is definitely possible - you need to use inline components. A component is a nested Ractive instance that manages its own data, and it's easy to set a depth property to 'whatever the parent depth is, plus one' - try running the code snippet below to see it in action.

Ractive.components.comment = Ractive.extend({
    template: '#comment',
    data: { depth: 0 } // default
});

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        comments: [
            {
                author: 'alice',
                content: 'FIRST!'
            },
            {
                author: 'bob',
                content: 'first!!1!',
                children: [
                    {
                        author: 'bob',
                        content: 'argh alice beat me',
                        children: [
                            {
                                author: 'alice',
                                content: 'haha'
                            },
                            {
                                author: 'charles',
                                content: 'you snooze you lose'
                            }
                        ]
                    }
                ]
            },
            {
                author: 'larry_34xj',
                content: 'Thank you for this article, it is very interesting. Please visit my blog at http://pills4u.com'
            },
            {
                author: 'dawn',
                content: 'This article is terrible. I don\'t know where to begin',
                children: [
                    {
                        author: 'bob',
                        content: 'do you have nothing better to do than write snarky comments on blog posts?',
                        children: [
                            {
                                author: 'dawn',
                                content: 'Do you have nothing better to do than write "first"? loser',
                                children: [
                                    {
                                        author: 'bob',
                                        content: 'touché'
                                    },
                                    {
                                        author: 'alice',
                                        content: 'haha pwned'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }        
        ]
    }
});

body { font-family: 'Helvetica Neue', arial, sans-serif; font-weight: 200; color: #353535; } h1 { font-weight: 200; } p { margin: 0.5em 0; }

.comment {
    padding: 0.5em;
    border-top: 1px solid #eee;
}

.comment .comment {
    padding-left: 2em;
}

.depth-1 {
    color: #555;
}

.depth-2 {
    color: #999;
}

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>

<main></main>

<script id='template' type='text/ractive'>
    <h1><a href='http://ifyoulikeitsomuchwhydontyougolivethere.com/' target='_blank'>spEak You're bRanes</a></h1>
    
    {{#each comments}}
        <comment comment='{{this}}'/>
    {{/each}}
</script>

<script id='comment' type='text/ractive'>
    <article class='comment depth-{{depth}}'>
        <p><strong>{{comment.author}}</strong> wrote:</p>
        <p>{{comment.content}}</p>
        
        {{#each comment.children}}
            <comment comment='{{this}}' depth='{{depth + 1}}'/>
        {{/each}}
    </article>
</script>