Render dynamic template in bootstrap popup

Hello,

I am working with one theme like pinterest. In that i have 5000 boxes loaded first and when i click on any of the box i want to load that box data with some more content for example post data with its comment and textarea for enter comment in bootstrap modal popup and i also want to change url so i can give that particular post to view. i have research about this thing i got one solution from meteor forum

But its takes long time to display popup because when i am rendering two template one is that 5000 box template and another one is its detail template then it going again for subscription. how can i load dynamic data in modal popup with url change? can any one suggest me any example. i am exited to see any example about this and how can i implement this thing optimized way.

below is my code

 //Routes for 5000 boxes page
this.route('posts', {
        path: '/',
        controller:"postsController",
        fastRender: true
    });

// Routes for detail page
this.route('detail', {
        path:"/post-detail/:_id",
        controller:"postDetailController"
    });

this.postsController = RouteController.extend({
    template: "posts",
    waitOn: function () {
        return Meteor.subscribe("allPosts");
    },
    data:function (){
        if(this.ready()){
            return {
                "posts": posts.find(),

            };
        }
    },
    onBeforeAction: function () {
        this.next();
    }

})
this.postDetailController = RouteController.extend({
    template: "postDetail",
    waitOn: function () {
        return Meteor.subscribe("allPosts");
    },
    data:function (){
        if(this.ready()){
            return {
                "posts": posts.find(),
                "singlePost":posts.findOne(this.params._id)
            };
        }else{
            this.render();
        }
    },
    action:function(){
        this.render("posts");
        this.render("postDetail",{to:"modalContent"});
    },
    onAfterAction:function(){
        if(this.ready()){
            Meteor.defer(function(){
                $("#card-open").modal("show");
            })
        }

    },
    onBeforeAction: function () {
        this.next();
    }

})

i am able to open popup on page load but its not giving me performance because it load aggain 5000 boxes for theme like pinterest. please help me out from this. Thanks in advance.

I would take all of the subscription and data logic out of the router and place it into the templates. For example when you open the modal and that content renders it will start a subscription and start streaming data. When it’s destroyed it can unsubscribe from that data.

If you’re just starting and it’s not too much work I would switch to FlowRouter too. It’s much nicer for doing template subscriptions.

Checkout this: https://www.discovermeteor.com/blog/template-level-subscriptions/