Subscribe inside rendered


#1

Hello,

I am looking for a solution for my code. I like to subscribe inside the template rendered. Ik have this code. How to update my html after my subscription

    Template.klussenboard.rendered = function() {
    Tracker.autorun(function() {
        Meteor.subscribe("Klussen", {
            onReady: function() {
                $(".sk-circle").hide();
                $("#frontpanel").removeClass("panel-danger");
                $("#frontpanel").addClass("panel-primary");
            }
        });
    });
}

The subscription worked fine but it does not update my template


#2

What are .sk-circle and #frontpanel? Are you sure they have been actually rendered before the subscription gets ready? Having a piece of your html would help.


#3

The problem is simple:
The subscribe function works well, but the list (klus) is not updated. I use Iron Router with this code

Router.route('/', function () {
  this.render('klussenboard', {
    data: function() {
            Session.set("klussentitel", "Klussen");
            templateData = {
                klus: Klussen.find({
                    "actief": {
                        $gt: 0,
                        $lt: 3
                    },
                    "datum": {
                        $lt: new Date()
                    }
                }, {
                    sort: Session.get("sort_by")
                })
            };
            return templateData;
        }  
	});
});

I use this template

<template name="klussenboard">
      <div class="panel-body">
         <div class="klussenboard">
            {{#each klus}}
				{{element}}
               </div>
               <div class="panel-body">
                  <h4>{{titel}} {{title}}</h4>
                  <span class="beschrijving">{{beschrijving}}</span> 
               </div>
               <div class="panel-footer">
                  {{datum}}
               </div>
            </div>
            {{/each}}
		 </div>
	 </div>	 
</template>

#4

You are doing template-level subscription but you query the local database from the route… Sorry, but my brain hurts :- ) My advice at this point would be:

  • Don’t use Iron Router, use Flow Router instead. If you really need to use Iron Router, don’t use the data() function, it is evil (see here).
  • Subcribe in onCreated, create a subtemplate to update your DOM in onRendered using local jQuery selectors, use a template helper to query your database. You should end up with something like this:
<template name="klussenboard">
  {{#if Template.subscriptionsReady}}
    {{> klussenboard_ok}}
  {{else}}
    (display spinner)
  {{/if}}
</template>
Template.klussenboard.created = function() {
  this.subscribe("Klussen");
}
<template name="klussenboard_ok">
  {{#each getKlus}}
    (display data)
  {{/each}}
</template>
Template.klussenboard_ok.rendered = function() {
  this.$(".sk-circle").hide();
  this.$("#frontpanel").removeClass("panel-danger");
  this.$("#frontpanel").addClass("panel-primary");
}

Template.klussenboard_ok.helpers({
  getKlus: function() {
    return Klussen.find(...);
  }
});


#5

I know what you mean. The problem I face is when I using the app on android. The app needs to works online and offline.
I receive a push message. I click on the push message. The app opens and will show me the tasks who are offline stored. The template is rendered and the subscription will start . When I am online the subscription success but the tasks (klussen) are not updated in the list in the template. You can see the headerbar turns normal. But in my case the app is not always online . I still need to work with the tasks who are stored offline.
In this case the loading after the subscription is not good because it will loads when the app turns online.
So how can I update the list when the subscription succeeds but still loads the offline tasks.


#6

Sorry, I don’t know how offline data works. Is something like this feasible? (modification of my code above):

Template.klussenboard.created = function() {
  var self = this;
  self.autorun(function() {
    if (isOnline())   // isOnline is a reactive function
      self.subscribe("Klussen");
  });
}