JSFiddle - React, Tailwind, and code Playground

by vpetrychuk

HTML

<script src="//underscorejs.org/underscore-min.js"></script>
<script src="//backbonejs.org/backbone-min.js"></script>
<script src="//marionettejs.com/downloads/backbone.marionette.min.js"></script>

<div class="js-container"></div>

<script type="text/template" class="js-stream-template">
    <h1>Stream</h1>
    <h2>Comments</h2 >
    <div class="js-comments-container"></div>
</script>

<script type="text/template" class="js-comment-template">
    <div>I 'm a comment <%= id %></div>
    <div class="js-replies"></div>
</script>

CSS

.js-replies .comment {
    margin-left: 20px;
}

JavaScript

var collection = new Backbone.Collection([
    {id: 1},
    {id: 2},
    {id: 3, replyTo: 1},
    {id: 4, replyTo: 3},
    {id: 5},
    {id: 6, replyTo: 1}
]);

var CommentView = Marionette.ItemView.extend({
    template: '.js-comment-template',
    className: 'comment',
    constructor: function (options) {
        this.attributes = {
            'data-id': options.model.id
        };
        Marionette.ItemView.prototype.constructor.apply(this, arguments);
    }
});

var StreamView = Marionette.CompositeView.extend({
    childView: CommentView,
    template: '.js-stream-template',
    childViewContainer: '.js-comments-container',
    attachHtml: function(collectionView, childView, index) {
        var replyTo = childView.model.get('replyTo');
        if (replyTo) {
            collectionView.$('[data-id=' + replyTo + '] > .js-replies').append(childView.el)
        } else {
            collectionView._insertAfter(childView);
        }
    }
});

new StreamView({
    el: '.js-container',
    collection: collection
}).render();