繁体   English   中英

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

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

我能够检索查询的结果,但似乎无法将其推送到模板中。

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检索到的数据呈现到我的视图中。 这是一个单页应用程序。

我不太了解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))
        }
    });

  }

});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM