Strange way to display data

help
1

Hi everyone,
I have recently tried out the Microscope project from Sacha’s book “Discover Meteor” - great resource for newbie.
Here is the link to my project: http://coolshare.vilalab.com/ . I have added the “Categories” menu for users to view filtered posts and I stumble on this problems: When users switch between categories, it looks like the posts from the prior category are slowly removed one by one and the post from the selected catgory are loaded one by one too.

My expected behavior would be all posts are removed when new category is selected, then we show the waiting spin and the new posts appear.

I really appreciate if you guys could help with an explanation about the cause of the behavior and a way to work around. My wild guess is that there is something to do with the subscriptions

Regards,
Hieu Tang

2

It is really hard (almost impossible) to comment on this without looking at your code.

It just appears to be around where you subscribe. You should check your publish and subscription code to see if you are actually waiting for them to be ready.

3

Hi Hieu,

well, why don’t you implement it the way you describe you’d expect it to work? Because it is very likely that it’s implemented currently in such a way that yes, if subscriptions should get updated very slowly (because of slow network or slow disk etc) you would see one-by-one updates on the screen or something similar.
So take the description of the behavior you’d like to see and give it a shot to try and implement it! There’s no reason to “work around it” (i.e. the undesired behavior), but instead there’s reason to implement it as you wish it were.
If you are on the path to becoming a Meteor developer that’s a great thing to take a stab at for one of your first programming tasks!

And if you have specific questions about how to implement such a thing, then just ask. But you’ll learn more from that than from “working around” things.

Hope that helps!
Cheers,
Denis

4

Hi, thanks for your replies

Here are my implemetations
In router

CategoriedPostsController = RouteController.extend({
    template: 'postsList',
    increment: 5,
    sort: {submitted: -1, _id: -1},
    postsLimit: function() {
        return parseInt(this.params.postsLimit, 10) || this.increment;
    },
    findOptions: function() {
        return {sort: this.sort, limit: this.postsLimit()};
    },
    subscriptions: function() {
        this.postsSub = Meteor.subscribe('categorizedPosts', this.params._id, this.findOptions());
    },
    waitOn: function() {
      return Meteor.subscribe('categories');
    },
    posts: function() {
        return Posts.find({}, this.findOptions());
    },
    nextPath: function() {
      return Router.routes.categoryPosts.path({_id: this.params._id, postsLimit: this.postsLimit() + this.increment})
    },
    data: function() {
        var posts = this.posts();
        var hasMore = posts.count() == this.postsLimit();
        return {
            posts: posts,
            ready: this.postsSub.ready,
            nextPath: hasMore ? this.nextPath() : null
        };
    }
});

Router.route('/category/:_id/:postsLimit?', {
    name: 'categoryPosts',
    controller: CategoriedPostsController
});

In collection

    Meteor.publish('categorizedPosts', function(category_id, options) {
    check(options, {
        sort: Object,
        limit: Number
    });
    return Posts.find({categories: category_id, 'emails.0' : {$exists: false}}, options);
});

@seeekr: Thanks for your comment. To be honest, the way I describe the expected behaviour is the way I think how the data flows. I guess I get it wrong. So is there anyway to use Meteor subscription to achieve this behaviour

Regards,
Hieu Tang

5

I can’t really spot anything wrong at first glance, would have to debug this to see what’s actually happening. Are you getting that behavior just in the deployed version or also when you test locally?

6

Hi @seeekr,
I could only see it in the deployed version. In the local project, it loads really fast. I’m surprised to see the records are slowly removed and then added. How does the data follow with the UI?

7 
subscriptions: function() {
        this.postsSub = Meteor.subscribe('categorizedPosts', this.params._id, this.findOptions());
}

This code snippet subscribes to the categorizedPosts publication. But it does not wait for the subscription to become ready, so naturally, the route begins to render whatever its got. What its got is some data from the previous subscription, getting removed and some data from the incoming subscription which is coming in one by one.

To make sure you wait for your subscription to completely get the initial data and then begin displaying results, you need to subscribe within waitOn or call a wait() on your subscription.

You’ll get a better picture if you read through the examples given here:

1 Like
8

How does the data follow with the UI?

Like this:

9

Thanks @serkandurusoy. I will look into those links