0

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

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()return 'depth0' 调用，我不明白为什么。

4

1 回答 1

3

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

因此，您应该避免使用具有“副作用”的函数——它们应该用于检索数据，而不是设置它。

但是递归结构绝对是可能的——你需要使用内联组件。组件是一个嵌套的 Ractive 实例，它管理自己的数据，并且很容易将depth属性设置为“无论父级depth是什么，加一个” - 尝试运行下面的代码片段以查看它的实际效果。

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>

于 2014-10-22T12:36:21.940 回答