Skip to content

Provider Components - named component confusion #131

@jafarlow

Description

@jafarlow

Following along with the tutorial for refactoring the /templates/index.hbs, we come to this subsection with the following instruction:

Let's start simple again and begin our refactor by creating a new template for our component, which we will call rentals.hbs

Screenshot from 2020-02-17 12-01-57

It took me a long time to realize that this is supposed to be a new file, and is not intended to replace the existing, similarly named app/components/rental.hbs. If I may suggest, can we make note of the difference in a component name that is singular versus plural, and why we might follow this naming convention?

Another point of confusion in the quote, is the phrase "template for our component". Given that there are templates in an Ember app and they are their own files within their own directory, perhaps we could have a more clear description? This appears several times on the page, using the phrase "component template" (emphasis below is mine):

Next, we'll wire up our query state in the component template (refers to a file in the components directory)

In our component template, we are not actually rendering anything. Instead, we're yielding to something, using the {{yield}} keyword, a syntax that we have seen before. As we might recall, the purpose of {{yield}} is to render the block that is passed in by the component's caller, which is the thing that is invoking the current component (a template or another component, for example)

  • Incidentally, this new syntax goes hand-in-hand with the {{yield this.results}} syntax we were introduced to in the component template.
  • Interestingly, if we take a look at our <Rentals::Filter> component template...

Would it still have the correct meaning to just refer to this (components/rentals.hbs) as a component, rather than as a component template? Or is this something different from components we've encountered thus far, and therefore needs to be named with a qualifier to differentiate its purpose to the user?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions