javascript - 如何将 ParseQuery 的结果推送到 JavaScript 中的模板属性？

Question

我能够检索查询结果，但我似乎无法将它们推送到我的模板。

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

    }

});

模板:

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

如何呈现我查询的评论？

路由器:

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

});

我正在使用<script src="js/parse-1.2.19.js"></script>与 http://handlebarsjs.com/ 结合将从 Parse 检索到的数据渲染到我的 View 。这是一个单页应用程序。

Answer 1

不太了解 Parse，但看起来您需要在异步查找请求的成功处理程序中渲染模板 - 否则它将不会等待此结果，而是渲染属性数据减去查找请求的结果

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

  }

});