Question

当我使用递归部分时，我遇到了一些问题。我试图创建评论，每个人都可以再次评论，如下：

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

我想为不同的评论深度添加一些特殊的课程

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

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

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

这是我使用的附加功能

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

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

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

所以，在每次评论之前我都会增加深度，在评论之后我会减少它。但不幸的是，我getClasses()的所有调用都返回'depth0'，我无法理解为什么。

Answer 1

如果您认为模板是只读的，而不是“执行”，这会有所帮助。从上到下的模板，Ractive从模板构造虚拟DOM，并在需要更改时更新其中的节点。因此，无法保证何时调用给定的函数。

所以你应该避免使用带有副作用的功能。 - 它们应该用于检索数据，而不是设置数据。

但绝对可以使用递归结构 - 您需要使用内联组件。组件是一个嵌套的Ractive实例，用于管理自己的数据，并且可以轻松地将depth属性设置为“父depth为什么，加上一个＆＃39; - 尝试运行下面的代码段以查看它的实际效果。

＆＃13;

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'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }        
        ]
    }
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

具有计数器的Ractive递归部分

1 个答案: