Trouble following the tutorial

Questions General
1

Hi there,

i’m trying to follow the quickstart tutorial here and i might have taken the wrong turn. It worked fine until that part with the “people-list” component. It doesn’t print a list of those scientists and i have no idea why. The page only shows “people tracker”, “list of scientists” and that’s it. No list at all.

I’ve uploaded what i have so far here: https://github.com/blindpenguin/TestEmberApp

Maybe someone can show me the way?

2

Hi @blindpenguin, welcome!

I see in the scientists template that you’re invoking the people list component like this:

<PeopleList @title="List of Scientists" @people="{{@model}}"></PeopleList>

I think the problem is where you’re passing the model as the @people arg. Here you have the mustaches wrapped in quotes which means the “people” arg is actually going to just be a string with literally {{@model}} instead of actually passing the model. This is a subtle thing and very easy to do accidentally. What you want is the same thing but without the quotes:

<PeopleList @title="List of Scientists" @people={{@model}}></PeopleList>

Try that and see how it works! I’d also suggest installing the Ember Inspector extension for Chrome. That has a handy feature where you can inspect args that are passed to a component so in cases like this you could see that the people arg was a string instead of the model you were expecting.

Good luck! And please let us know if you have any more questions or issues

EDIT: for further clarification, only wrap args in quotes if they are string literals, everything else should be in mustaches {{...}}

2 Likes
3

Well, i feel dumb now. :smiley: Webstorm automagically adds quotes while writing “@people=”. I didn’t see it at all.

Thank you very much.

1 Like
4

@blindpenguin don’t feel dumb, we all get snagged by things that seem so simple when we finally find them. Especially when learning a new tool :slight_smile:

Welcome to the Ember community!

2 Likes