Strange behavior of the collection MeteorJS

Question

I have collection with simple docs like {title:"some title", routes:{first:"sport",second:"football"}} and have some categories like

[{
  name: "sport",
  children: {[
     {
        name: "football",
     },
     {
        name: "basketball
     }
  ]}
},
{
  //....
}
///...
]

Problem: when I switch beetwen 2 routes like "/sport/football" and "/sport/basketball" for a 1 second I see posts from another route like here:

1) "/sport/football"
   (I see)

  - post1
  - post2

2) go to "/sport/basketball"
   (for <1 second I see)

  - post1
  - post2
  - post3
  - post4

3)"/sport/basketball"
  (after <1 second I see)

  - post3
  - post4


 /// Code
 Template.third_level.onCreated(function(){
        var self = this;
        self.autorun(function() {
            var second_route = Session.get("current_route").params.name_second;
            var first_route = Session.get("current_route").params.name;;
            self.subscribe('posts_levels', first_route, second_route);
        });
    });

Template.third_level.helpers({
    third_level:function(){
        return Posts.find();
    },
});

<template name="third_level">
{{#if Template.subscriptionsReady}}
    {{#each third_level}}
        {{> third_category}}
    {{/each}}
{{/if}}
</template>

Tracker.autorun(function() {
    FlowRouter.watchPathChange();
    var currentContext = FlowRouter.current().path;
    Session.set("current_route",{
        path: currentContext,
        params: FlowRouter.current().params
    });
});

Meteor.publish("posts_levels", function(route_one, route_two){
    check(route_one , String);
    check(route_two , String);
    return Posts.find({
        routes: { $in : [{
            first: route_one,
            second: route_two
        }]}
    });
});

Answer 1

It works like designed

1. you local collection has items 1 and 2
2. you change your subscription, you collection has still 1 and 2
3. ddp sends you messages: { added: 3 }, { added: 4 }, { removed: 1}, { removed: 2}

NOTE: DDP sends for each insertion / deletion / update an own message, not as a single message!

So, instead of assuming and hoping, that you collection has only the data you need and showing the whole collection via Collection.find() you should perform the query on the client, so you only show what you want..

So instead of:

third_level:function(){
    return Posts.find();
},

do this

third_level:function(){
    // get stuff from session, like in publication
    var first = Session.get // ..
    var second = Session.get // ..

    return Posts.find({routes: { $in : [{
        first: first,
        second: second
    }]}});
},

this way you will see only the items you need, and the collection can update its way, without strange side effects.

Another way to solve it: Lets say you know, that after the subscription is ready you can expose the whole collection.. ok do this:

third_level:function() {
    if (Template.instance().subscriptionsReady())
      return Posts.find();
},

this way you only return if the subscription is ready, this means for some ms you view will be empty!