Not populating {{each}} even when console says data is there


#1

Based on this code, https://gist.github.com/claytonzaugg/5cd34c365fbc6d9aa693 is there any reason why I am not getting the list of Categories populated, even though the browser console shows 6 when I type Categories.find().count()?

What did I do incorrectly?

Thank you!


#2

I’m not very familiar with the Router-stuff. But for me it looks like you are not publishing the contents of Category on the server-side. But if you are seeing the contents of Category in the browser console, the contents are indeed published. Maybe you might want to narrow the problem down. Try to log to the browser console from the Categories-helper method, to see if it is actually called from the template. You might want to take a look into the html structure as well to see if the templates are indeed rendered.


#3

I would just check by hand in browser console and click open returned array of

Categories.find().fetch()

And than not related, but you are setting <li id="categories" what is not very DOM friendly if you will be creating more of them.


#4

Write:

Template.ListCategories.helpers({
  Categories: function() { console.log(Categories.find().fetch());
    return Categories.find();
  }
});
  1. Does an array with 6 documents from the Categories collection show
    up in the browser console?
  2. Do each of these have a name field?
  3. When you open the browser console and inspect the DOM, can you see 6 <li>
    elements with id="categories" (that really should be changed to a
    class, by the way – or, more likely the id="categories" should
    be shifted up to the <ul> tag – and, even then, I’d recommend
    changing it to a class)

If yes to all of these, I’m out of ideas.


#5

Yes

Yes

No, and I did change id to equal {{_id}}


#6

I’m pretty sure that there is an issue with having a helper with the same name as a collection. In this case, that would be Categories. I suggest changing your helper and template to use categoryList (or similar).


#7

Okay, so your template ListCategories isn’t getting rendered. Otherwise those <li> elements would be in the DOM.

So looking at where in your code ListCategories might be getting rendered, we find:

yieldTemplates: {      
  'photos': { 
    to: 'ListPhotos'  
  },      
  'categories': {
    to: 'ListCategories'       
  }
}

And here, I looked up the syntax for yields from the iron:router docs. It appears that these are back-to-front and should read:

yieldTemplates: {      
  'ListPhotos': { 
    to: 'photos'  
  },      
  'ListCategories': {
    to: 'categories'     
  }
}

#8

I tried reversing this, still no updates to the DOM with the data from the Categories template. Thanks for the update on proper syntax though! Any other possible solutions?


#9

I just tried this, and unfortunately it didn’t work. Good syntax advice for me though, thank you.


#10

It should be yieldRegions not yieldTemplates. Take a look at the examples in the guide.


#11

I updated as well, made sure names were matching, still not getting it… Maybe I need to alter subscriptions perhaps, I only have categories and photos subscribed in the home_controller file. Could that be problematic?

EDIT
Nope, adding subscriptions to categories and photos controllers still no result.


#12

Hey, wait a minute. Did you actually put the console.log in the helper and see the result in the browser console?

Template.ListCategories.helpers({
  Categories: function() { console.log(Categories.find().fetch());
    return Categories.find();
  }
});

That would have done nothing if your template isn’t getting rendered. Something’s not adding up here …


#13

I put the console log in the ListCategories.helpers but did not see the console log. However, on my home page, the MasterLayout, if I run Categories.find().fetch() I can get all six of my categories.


#14

paste how your Router.configure looks like now.
And write some test text to your templates so you see if they are at least getting rendered


#15
Router.configure({
    layoutTemplate: 'MasterLayout',
    loadingTemplate: 'Loading',
    notFoundTemplate: 'NotFound',
    yieldRegions: {
        //each yield going to different templates
        'ListPhotos': {
            to: 'photos'
        },
        'ListCategories': {
            to: 'categories'
        }
    }
});

Router.route('/', {
    name: 'home',
    controller: 'HomeController',
    action: 'action',
    where: 'client'
});

Router.route('/:name', {
    name: 'photos',
    controller: 'HomeController',
    action: 'action',
    where: 'client'
});

#16

Here’s the repo with all the files, since I’m absolutely baffled now.


#17

dude i just saw your code you are not even rendering categories_list.html in anything, smh

this is your router file

Router.route('/', {
    name: 'home',
    controller: 'HomeController',
    action: 'action',
    where: 'client'
});

Router.route('/:name', {
    name: 'photos',
    controller: 'HomeController',
    action: 'action',
    where: 'client'
});

and in your home controller you are rendering the layout:

  action: function () {
    this.render('MasterLayout');
  },

NONE of your templates are rendering.

basically the iron router rendered the layout, and it saw your home controller, and went in, and saw you rendering the layout again.

Route ‘/’ -> render layout -> yield home_controller -> render action -> render layout

you gotta render your actual template you want to render in the action.

And where does categories_list.html should go? in the home.html? them you gotta actually put it in there. If it goes into its own route, then you are gotta make a ‘/categories’ route or something and in the action you are gotta render THE TEMPLATE categories_list.html

With that being said, seeing as you are starting a new project, please look into flowrouter + blaze layout and template level subscriptions. They will save you more headaches down the road.


#18

…I have no words. Thanks for your help in tracking down my problem. Obvious oversight, but still one none the less, and a great learning experience as I keep trying to understand Meteor. Appreciate the diligence put in!


#19

dude honestly give FlowRouter and BlazeLayout 5 min. Especially if you are learning, Iron router is not being maintained really anymore.



#20

Cool, I’ll check those both out tonight, especially with the news of iron router not being updated much anymore. Again, appreciate it!