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!
cpradio
November 26, 2016, 3:39pm
2
Yes, and the # denotes block form (instead of inline)
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:
```handlebars...
3 Likes
Thanks for your help @cpradio
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!
cpradio
November 26, 2016, 3:58pm
5
Yes, it depends how the component is built and what it is extending (if anything).
Example of using Buffered Render
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
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"),
show original
2 Likes