CODEWITHSUNDEEP
ember.jshandlebars.js
jasalguero
jasalguero

Reputation: 4181

Handling dynamic nested views with Ember + Handlebars

I'm using Ember.js 1.0 pre release and Handlebars 1.0.0 and want to represent a list of comments to a post.

My comment object is this:

// COMMENT ITEM
HaBlog.Comment = Em.Object.extend({
 user:null,
 text:null,
 created: moment().subtract('years', 100),
 createdAgo: function(){
     return (this.get('created').fromNow());
 }.property('created'),
 rating:null,
 replies:[]

});

And this is my template for the view:

 <div id="postComments" class="span10">
        <h1>Comments</h1>
        {{#each comments}}
        <div class="comment">
            <small>
                <span class="commentDate">
                    {{createdAgo}}
                </span>
            </small>
                <span class="commentText">
                    {{text}}
                </span>
        </div>
        {{#each comments.replies}}
        <div class="comment">
            <small>
                <span class="commentDate">
                    {{createdAgo}}
                </span>
            </small>
                <span class="commentText">
                    {{text}}
                </span>
        </div>
        {{/each}}
    </div>

My problem is that each comment can have a number of replies, which are comments on their own, so they can have more replies.

I have check the nested views in Ember.js and Handlebars, but don't seem to find any way to make it loop through all the replies in a recursive way displaying all the comments in a "tree" way...

Upvotes: 1

Views: 801

Answers (1)

Alex Matchneer
Alex Matchneer

Reputation: 3309

I'm having a little trouble understanding exactly what falls under comment vs reply based on your question but I think you should still be able to solve this based on what I suggest below.

What you'll want to do is use an Ember.CollectionView and define a view class that you'll use as the itemViewClass on the collection view. So your itemViewClass would be something like CommentView, and what have a template like:

Comment Text: {{text}}
Replies: {{view Ember.CollectionView content=replies itemViewClass=HaBlog.CommentView}}

This is the only way to handle the problem of recursion, which, like you said, can't really be handled with Handlebars only.

Upvotes: 2

Related Questions