Skip to content

Using Stimulus controller with live-component #687

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
fajino17 opened this issue Feb 14, 2023 · 2 comments
Closed

Using Stimulus controller with live-component #687

fajino17 opened this issue Feb 14, 2023 · 2 comments

Comments

@fajino17
Copy link

I've read discussion on this issue #527, but I do not clearly understand what means 'put controller around root element'.
Something like this?

<div data-controller="custom-controller">
<div{{attributes}}></div> -- live component root
</div>

also

div {{ attributes.add(stimulus_controller('custom-controller', { someValue: 'foo' })) }}> -- live component root

#https://symfony.com/bundles/ux-live-component/current/index.html#working-with-the-component-in-javascript
I couldn't make none of these working.
Can somebody explain this for me. Thanks

@nicodemuz
Copy link

@fajino17 did you figure this out?

@IvoPereira
Copy link

If you have created a controller named custom_controller, you would only use custom when referencing it.

Basically, you create your component (let's say NavBar), and in its Twig definition you would have something in the lines of:

<div {{ attributes.defaults(stimulus_controller('custom')) }}>
    <!-- your component here -->
</div>

srich387 added a commit to srich387/ux that referenced this issue Jan 1, 2024
…us controllers

In the section 'Working with the Component in JavaScript', the preamble mentions that you can create a custom Stimulus controller and attach it to or put it around the root component element in order to control its behaviour.

How to attach a custom controller is only explained further down in the subsection 'Adding a Stimulus Controller to your Component Root Element'. This subsection is currently buried beneath an intervening subsection on a different topic, 'JavaScript Component Hooks', making it easy for a reader to overlook.

As such, to improve the logical flow of the documentation, I have swapped these two subsections around.

It is especially important that this information is presented clearly because it has caused confusion in the past; see e.g. symfony#687.
kbond added a commit that referenced this issue Jan 3, 2024
…ustom Stimul… (srich387)

This PR was merged into the 2.x branch.

Discussion
----------

[live-component docs] Rearrange information about using custom Stimul…

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no
| Issues        | n/a
| License       | MIT

In the section 'Working with the Component in JavaScript', the preamble mentions that you can create a custom Stimulus controller, and attach it to or put it around the root component element, in order to control its behaviour.

How to attach a custom controller is, however, only explained further down in the subsection 'Adding a Stimulus Controller to your Component Root Element'. This subsection is currently buried beneath an intervening subsection on a different topic, 'JavaScript Component Hooks', making it easy for a reader to overlook.

I have therefore swapped these two subsections around to improve their logical flow.

It is especially important that this information is presented clearly because it has caused confusion in the past; see e.g. #687.

Commits
-------

c8113e0 [live-component docs] Rearrange information about using custom Stimulus controllers
DennisdeBest added a commit to DennisdeBest/ux that referenced this issue Aug 11, 2024
To add a custom stimulus controller to the root component element the name can not contain `-controller`.

If using `some_custom_controller.js`, the name should be `some-custom`

I had some issues with that and figured it out on this github issue : symfony#687 (comment)
kbond added a commit that referenced this issue Aug 13, 2024
…s - index.rst (DennisdeBest)

This PR was merged into the 2.x branch.

Discussion
----------

Update naming of stimulus controller on default attributes - index.rst

To add a custom stimulus controller to the root component element the name can not contain `-controller`.

If using `some_custom_controller.js`, the name should be `some-custom`

I had some issues with that and figured it out on this github issue : #687 (comment)

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no
| License       | MIT

Commits
-------

03abf65 Update index.rst
symfony-splitter pushed a commit to symfony/ux-live-component that referenced this issue Aug 13, 2024
To add a custom stimulus controller to the root component element the name can not contain `-controller`.

If using `some_custom_controller.js`, the name should be `some-custom`

I had some issues with that and figured it out on this github issue : symfony/ux#687 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants