How do I push the results of a ParseQuery to my template attributes in JavaScript?

Question

I was able to retrieve the results of my query, but I can't seem to push them to my template.

BlogApp.Views.Blog = Parse.View.extend({
    template: Handlebars.compile($('#blog-tpl').html()),
    className: 'blog-post',

    render: function() {
        var self = this,
            attributes = this.model,
            query = new Parse.Query(BlogApp.Models.Blog);
        query.include("author");

        attributes.loggedIn = Parse.User.current() != null;
        if (attributes.loggedIn) {
            attributes.currentUser = Parse.User.current().toJSON();
        }

        console.log(attributes.objectId);

        var Post = Parse.Object.extend("Post");
        var commentsQuery = new Parse.Query(Post);
        commentsQuery.equalTo("senderParseObjectId", attributes.objectId);
        commentsQuery.find({
            success: function(comments) {
                console.log(comments);
            }
        });

        attributes.comment = $comments;
        this.$el.html(this.template(attributes));

    }

});

Template:

<script id="blog-tpl" type="text/x-handlebars-template">

    {{#if comment}}
    <div class="blog-sec">
        <br><br>
        <h2>Comments</h2><br>
        <ul class="blog-comments list-unstyled">
            {{#each comment}}
            <li class="blog-comment">
                <table>
                    <tr>
                        <td width="7.5%" style="vertical-align: middle;">
                            <a href="#/{{author.username}}"><img onError="this.src='images/ic_anonymous.png';" src="{{secureUrl author.profilePicture.url}}" class="profilePictureComments hvr-pulse-grow" id="profilePicture"></a>
                        </td>
                        <td width="auto" style="vertical-align: middle;">

                            <div><a href="#/{{author.username}}">@{{author.username}}</a></div>
                            <div>{{notificationText}}</div>
                            <div style="color: #a3a3a3;">{{time}}</div>
                            {{#if image.url}}
                            <a class="view" href="{{secureUrl image.url}}"><img class="hvr-pulse-grow profilePicture" src="{{secureUrl image.url}}" style="vertical-align: middle; width: 200px; height: 150px; border-radius: 33px;"></a>
                            <br> {{/if}}

                        </td>
                    </tr>
                </table>


                <hr>
            </li>
            {{/each}}
        </ul>
    </div>
    {{/if}}

</script>

How can I render the comments that I've queried?

Router:

BlogApp.Router = Parse.Router.extend({

    start: function() {
        Parse.history.start({
            root: '/beta/'
        });
    },

    routes: {
        '': 'index',
        'post/:url': 'blog',
        'admin': 'admin',
        'login': 'login',
        'store': 'store',
        'reset': 'reset',
        'logout': 'logout',
        'add': 'add',
        'register': 'register',
        'editprofile': 'editprofile',
        'changeprofilepic': 'changeprofilepic',
        ':username': 'userprofile'
    },

    blog: function(url) {
        BlogApp.fn.setPageType('blog');
        BlogApp.query.blog.equalTo("objectId", url).find().then(function(blog) {
            var model = blog[0];
            var author = model.get('author');
            model = model.toJSON();
            model.author = author.toJSON();

            BlogApp.fn.renderView({
                View: BlogApp.Views.Blog,
                data: {
                    model: model,
                    comment: $comments
                }
            });

            BlogApp.blog = blog[0];
        });
    },

});

I'm using <script src="js/parse-1.2.19.js"></script> in combination with http://handlebarsjs.com/ to render the data retrieved from Parse to my Views. This is a single page application.

Answer 1

not knowing Parse too well but it looks like you need to render the template within the success handler of your asynchronous find request - otherwise it will not have waited for this result and instead rendered the attributes data minus the results of your find request

BlogApp.Views.Blog = Parse.View.extend({
  template: Handlebars.compile($('#blog-tpl').html()),
  className: 'blog-post',

  render: function() {
    var self = this,
        attributes = this.model,
        query = new Parse.Query(BlogApp.Models.Blog);
    query.include("author");

    attributes.loggedIn = Parse.User.current() != null;
    if (attributes.loggedIn) {
        attributes.currentUser = Parse.User.current().toJSON();
    }

    console.log(attributes.objectId);

    var Post = Parse.Object.extend("Post");
    var commentsQuery = new Parse.Query(Post);
    commentsQuery.equalTo("senderParseObjectId", attributes.objectId);
    commentsQuery.find({
        success: function(comments) {
            console.log(comments);
            attributes.comment = comments;
            self.$el.html(self.template(attributes))
        }
    });

  }

});