c98130cc08
* ui: Add the most basic workspace root in /ui * We already have a LICENSE file in the repository root * Change directory path in build scripts ui-v2 -> ui * Make yarn install flags configurable from elsewhere * Minimal workspace root makefile * Call the new docker specific target * Update yarn in the docker build image * Reconfigure the netlify target and move to the higher makefile * Move ui-v2 -> ui/packages/consul-ui * Change repo root to refleect new folder structure * Temporarily don't hoist consul-api-double * Fixup CI configuration * Fixup lint errors * Fixup Netlify target
53 lines
1.9 KiB
Plaintext
53 lines
1.9 KiB
Plaintext
## Ref
|
|
|
|
`<Ref @target={{this}} @name="api" @value={{api}} />`
|
|
|
|
| Argument | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| `target` | `Object` | | The object to assign the property/value to |
|
|
| `name` | `String` | | The property name |
|
|
| `value` | `Object` | | The value |
|
|
|
|
`<Ref />` allows component users use an author defined public API of a component. The component is renderless in that it yields nothing to the DOM.
|
|
|
|
The component takes a property name and value and sets it on the specified target, similar to the `{{ref this "name"}}` modifier.
|
|
|
|
Occasionally it's necessary call actions belonging to a component from outside the component. For example, you may have a form that needs submitting by clicking a button in another area of the
|
|
page. In order to do this, the button needs access to the `submit` action of the form component.
|
|
|
|
This can be thought of as providing the public API for the component, the author of the component has control over what the user of the component can and can't call in this way.
|
|
|
|
### Example
|
|
|
|
Here we provide a public API for a form component whilst authoring.
|
|
|
|
```handlebars
|
|
{{! /components/form/index.hbs }}
|
|
<form onsubmit={{action "submit"}}>
|
|
{{yield (hash
|
|
focus=(action "focus")
|
|
submit=(action "submit")
|
|
cancel=(action "cancel")
|
|
)}}
|
|
...
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
```
|
|
|
|
The user of the component now has access to the public API of the ember/glimmer `<Form>` component, in the same way that using the `{{ref}}` modifier gives the user access to the public API of native DOM elements (for example `<input {{ref this 'input'}}/>` / `this.input.focus()`).
|
|
|
|
```handlebars
|
|
{{! /templates/index.hbs}}
|
|
<Form as |api|>
|
|
<Ref @target={{this}} @name="form" @value={{api}} />
|
|
</Form>
|
|
...
|
|
<button type="button" onclick={{action this.form.submit}}}></button>
|
|
```
|
|
|
|
### See
|
|
|
|
- [Component Source Code](./index.js)
|
|
|
|
---
|