Created
July 24, 2019 19:29
-
-
Save habdelra/6f1d18d68ef69e45b7096056e10bde17 to your computer and use it in GitHub Desktop.
Card Adopts Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Card Adoption example | |
{ | |
data: { | |
type: 'cards', | |
id: '@foobar/events-are-us::event-cards::emberconf-2020', | |
attributes: { | |
// no need to define templates and components if we have not changed it | |
// when hub instantiates this card it will traverse the "adopts" graph to get the template and components for this card | |
// when there is more than 1 adopted card, then you must define your card's templates and components here | |
// Also use similar approach as ember in terms of not having a component js, where the component is just a glimmer comnponent of the outer HTML of the template, | |
// in the case the card you are adopting does not have a component js | |
'isolated-template': ` | |
{{yield}} {{!-- single adoption means that delegated rendered templates are just yields --}} | |
Vegan Friendly: {{content.veganFriendly}} | |
Nearby events: | |
{{#each content.nearbyEvents as |event|}} | |
<div>{{event.name}}</div> | |
{{/each}} | |
`, | |
'embedded-template': ` | |
{{!-- here we are overriding the embdded template and rendering the adopted "location" field in a google map --}} | |
<GoogleMap @address=content.eventLocation></GoogleMap> | |
` | |
dependencies: [ | |
'ember-google-maps': '^1.23.0' | |
] | |
// no need to define templates, components, and dependencies if we have not changed it | |
// when hub instantiates this card it will traverse the "adopts" graph to get the template, components, and npm dependencies for this card | |
}, | |
relationships: { | |
fields: [ | |
// these fields (and the template above) are what makes this a custom event--which was the rationale for adopting the core event card | |
{ data: { type: 'computed-fields', id: '@foobar/events-are-us::event-cards::nearby-events'}}, | |
{ data: { type: 'fields', id: '@foobar/events-are-us::event-cards:vegan-friendly'}}, | |
], | |
// When we adopt a card, its fields definitions become our fields, and it's data can become our "example" data for | |
// the specific fields that we are adopting. Note that you can only adopt a single card. More sophisticated composition | |
// should leverage card relationships. | |
adopts: { | |
// because this card adopts @cardstack/event::event-card::v1.0.0, it can be used for any relationship that that specifies | |
// a `related-cards` of card @cardstack/event::event-card::v1.0.0. All cards that can trace their `adopts` graph back to the card | |
// @cardstack/event::event-card::v1.0.0 can be used in relationships that specify this related card. | |
data: { type: 'cards', id: '@cardstack/event::event-card::v1.0.0' } | |
}, | |
model: { | |
data: { type: '@foobar/events-are-us::event-cards', id: '@foobar/events-are-us::event-cards::emberconf-2020' } | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment