Why does my template not reactive?

If I first open http://localhost:3000/, then click the test link, the roles labels will be displayed.

But if I directly open http://localhost:3000/test(Input the url in Chrome’s address bar and hit enter), the roles labels will not be displayed.

Here is my code:

In client startup I subscribe to something:

Meteor.publish("Roles", function(){
  return Roles.find();
});

Meteor.startup(function() {
  if(Meteor.isClient) {
    Meteor.subscribe('Roles');
  }
});

And roles template:

Template.roles.helper( {
  allRoles: function() {
    return Roles.find();
  }
})

html

      <template name="roles">
      <div>
        {{#each allRoles}}
          <label>test</label>
       {{/each}}
      </div>
    </template>

The problem is sometime roles template is rendered before the Roles is ready.
So these is no role labels displayed.

But according to Meteor document, helpers is a reactive computation, and Database queries on Collections is reactive data source. So after Roles is ready, the {{#with allRoles}} is reactive and should be displayed.

Why does roles not be displayed?

And then I rewrite my code to:

 Meteor.startup(function() {
       if(Meteor.isClient) {
        roles_sub = Meteor.subscribe('Roles');
       }
     });



   Template.roles.helper({
            allRoles: function() {
              console.log(2);
              return Roles.find();
            },
            isReady: function() {
              console.log(1);
              console.log(roles_sub.ready());
              return roles_sub.ready();
            }
          })

html

    <template name="roles">
       <div>
         {{#if isReady}}
         {{#each allRoles}}
           <label>test</label>
         {{/each}}
        {{/if}}
      </div>
    </template>

And still role labels cannot be displayed.
And console gives me:

1
false
1
false
1
true
2

Which means isReady() is reactive? but why my roles labels remains blank?

Can somebody explain this?

Your original code looks just fine. Is your publish function actually called?

You are writing {{> role }} which would include a “role” template with context provided by your allRoles helper, but i don’t see a “role” template anywhere in your code ?

Yes, I use console.log to confirmed.

It is not important so I did not write. Even I use <p>aa</p> it wont work

do you mean to write

{{#each allRoles}}
    <label>{{> role}}</label>
{{/each}}

I have never used {{#with}} when I expected more than 1 element (i.e. only when I used findOne), so I don’t know if with also implicitly loops through the results. In any case I would say it is better to use {{#each}} when you are expecting more than one result from a query, since that is what it was designed for.

It still does not work…

I changed to #each , still doest not work.

Do you see documents for your publication when you query the collection in the client database in the console ?
What gives Roles.find().fetch() in the console ?