Search code examples
javascriptember.jsdiscourse

Ember template convention

I'm trying to understand EmberJS template convention in Discourse. Here's a snippet from app/assets/javascripts/discourse/templates/discovery/categories.hbs

{{#discovery-categories refresh="refresh"}}
  {{component controller.categoryPageStyle
              categories=model.categories
              latestTopicOnly=controller.latestTopicOnly
              topics=model.topics}}
  {{!-- my-template --}}
{{/discovery-categories}}

What is the meaning of discovery-categories and component? For example I want to insert my-template to extend categories.hbs, what is the convention I should use to create file with my template?

Solution

    1. discovery-categories is the name of the component which is called statically using the name of the component.

    2. Whereas in the second line 'component' is a template helper which loads the component dynamically using the name specified via property controller.categoryPageStyle.

    3.my-template is the yield block , where you can have context of the component discovery-categories if its yield. for eg. if discovery-categories has a property foo you can write something like 

    {{#discovery-categories refresh="refresh" foo="Some Text"}}
  {{component controller.categoryPageStyle
              categories=model.categories
              latestTopicOnly=controller.latestTopicOnly
              topics=model.topics}}
  {{foo}}
{{/discovery-categories}}