I’m attempting my first plugin and have come across this in the codebase: {{#discovery-categories refresh="refresh"}} {{component categoryPageStyle categories=model.categories latestTopicOnly=latestTopicOnly topics=model.topics}} {{/discovery-categories}} I’ve done some basic Ember recently, but haven’t come across the {{#name}} syntax yet. I learnt to use components like (without the hash in the name): {{component-name}} Does the hash/pound symbol represent anything special? Is it even a component? And why is the categoryPageStyle component being called with ‘component’ in front of it? Thanks!

Yes, and the # denotes block form (instead of inline) [image] Wrapping Content in a Component - Components - Ember Guides Sometimes, you may want to define a component that wraps content provided by other templates. For example, imagine we are building a blog-post component that we can use in our application to display a blog post: {{title}}

I’m also assuming that components can exist without having their own template file? (As there doesn’t appear to be one for discovery-categories.) This is something I was also unaware of!

Yes, it depends how the component is built and what it is extending (if anything). Example of using Buffered Render assets/javascripts/discourse/components/composer-help-content.js.es6 master import Component from "@ember/component"; import { bufferedProperty } from "discourse/mixins/buffered-content"; const ComposerHelpContentComponent = Component.extend(bufferedProperty("model"), { tagName: "div", }); export default ComposerHelpContentComponent; Versus one that is utilizing a template assets/javascripts/discourse/components/imgflip-result.js.es6 master export default Ember.Component.extend({ result: Em.computed.alias("content"), tagName: "div", classNames: ["imgflip-imgwrap"], selectedClass: function() { return this.get("result.id") == this.get("selectedMeme") ? "selected" : ""; }.property("selectedMeme"), selectedChanged: function() { this.rerender(); }.observes('selectedMeme'), click: function() { this.sendAction("pickItem", this.get("result.id")); }, alternateText: function() { return this.get("result.name"); }.property("result"), This file has been truncated. show original

Block form component

Development

jamesmarkcook (James Cook) November 26, 2016, 3:41pm 3

Thanks for your help @cpradio

Topic		Replies	Views
Ember template convention Development	3	921	October 24, 2016
Render a component within a Widget. (Using select-kit components within plugin code) Development	29	4199	March 6, 2024
When to switch themes/plugins to `.gjs`? Development	27	1376	January 5, 2026
Templating of my "component" broke. How do I fix it? Development	14	582	March 17, 2026
Topic List Item footer buttons - timeline content Development	3	1301	March 3, 2021

Block form component

Related topics