Last active
July 24, 2019 20:37
-
-
Save habdelra/76e298b97757db7cb85a89d2a2923b32 to your computer and use it in GitHub Desktop.
Fields as Cards
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
// In this example we show how fields are actually cards, and we customize a field by adopting a string-field card. | |
{ | |
data: { | |
type: 'cards' | |
id: '@acme/ticket-tools::ticket-card:123', | |
... | |
}, | |
included: [ | |
// This is how we define a field editor, where the currency-field-card has a custom template | |
// which is based on a string field | |
{ | |
type: 'cards', | |
id: '@acme/ticket-tools::currency-field-card', | |
attributes: { | |
// Here we are editing the string field card's template to customize it for our price field | |
// I'm making lots of assumptions around what it means to set a field in a field card's template | |
'editing-template': ` | |
Price: <input | |
type="number" min="0.01" step="0.01" | |
value={{get content field}} | |
disabled={{disabled}} | |
oninput={{action (mut (get content field)) value="target.value"}} | |
onblur={{action onchange}} | |
> | |
` | |
}, | |
relationships: { | |
adopts: { | |
data: { type: 'cards', id: '@cardstack/core-types::string-field-card' } | |
}, | |
} | |
}, | |
{ | |
type: 'fields' | |
id: '@acme/ticket-tools::ticket-card::price', | |
attributes: { | |
'is-metadata': true, | |
'needed-when-embedded': true, | |
}, | |
relationships: { | |
'field-type': { | |
data: { type: 'cards', id: '@acme/ticket-tools::currency-field-card' } // because this card's adopt graph can be traced back to a string, then we know this is a string | |
}, | |
} | |
} | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment