x-bind to $root

[manuelmeister]

It would be really nice to have a way to x-bind to the reusable component without declaring x-bind besides x-data:

Alpine.data("link", () => ({
    clickable: false,
    click(event) {
        if (!this.clickable) {
            event.preventDefault();
        }
    },
    root: {
        ["x-on:click.capture"]: function (event) {
            this.click(event);
        },
        ["x-on:keydown.enter"]: function (event) {
            this.click(event);
        },
        ["x-on:keydown.shift"]: function () {
            this.clickable = true;
        },
        ["x-on:keyup"]: function () {
            this.clickable = false;
        },
    }
}));

How we have to do it now:

 <a x-data="link" x-bind="root">Read more</a>

How I would love to do it:

<a x-data="link">Read more</a>

[ekwoka]

There already is:

https://alpinejs.dev/globals/alpine-bind

[ekwoka]

oh, you mean, have like a property on the x-data that auto binds stuff.

So you can add to your data

init() {
  Alpine.bind(this.$root, this.root)
}

And it would do that.

Also, as a style thing, the normal way to define a method on an object is

["x-on:click.capture"](event) {
    this.click(event);
}

not with a function expression

[ekwoka]

It does though

https://awesomealpine.com/play/?coreplugins=0&html=PGRpdgogIHgtZGF0YQogIHgtYmluZD0iY29vbHN0dWZmIgo-CiAgaGVsbG8KPC9kaXY-Cg&script=QWxwaW5lLmJpbmQoJ2Nvb2xzdHVmZicsIHsKICBzdHlsZTogJ2NvbG9yOndoaXRlO2JhY2tncm91bmQ6YmxhY2s7JywKfSk7Cg

[SimoTod]

I second this. I mean it feels so natural to expect the properties to auto-bind themselves without adding a "root" key.
I wristled with this code for a long time trying to figure out why i did not work.

   # does not work
    Alpine.data('comp', () => ({
        init() { console.log('init') },
        ['@click']() { console.log('click') },
        ['@keyup'](e) { console.log('keyup') }
    }));

How do you differentiate between a data property in your component vs a property that you want to bind to your component? Let's not say that by comparing the name to existing directives because you can have custom prefixes, custom directives, arbitrary modifiers, you may want to bind a standard attribute, etc.

[ekwoka]

Yeah, I think registering bindings with Alpine.bind and using them or applying them in the init with Alpine.bind is simple enough in user land without needing to introduce magic that could make things less clear and reduce the posibilities of the future..

[y1n0]

It does though

https://awesomealpine.com/play/?coreplugins=0&html=PGRpdgogIHgtZGF0YQogIHgtYmluZD0iY29vbHN0dWZmIgo-CiAgaGVsbG8KPC9kaXY-Cg&script=QWxwaW5lLmJpbmQoJ2Nvb2xzdHVmZicsIHsKICBzdHlsZTogJ2NvbG9yOndoaXRlO2JhY2tncm91bmQ6YmxhY2s7JywKfSk7Cg

Thanks for providing the sandbox. So x-data is needed for x-bind to work. Maybe that should be mentioned in x-bind documentation because it reads like x-bind is enough by itself, thus my initial confusion.
Edit: I get it x-data or x-init are what actually initializes the component so it is implied they must have been called somewhere up in the dom tree, but still I think I would not hurt to mention it again for clarity

[ekwoka]

This comes up a bit, but idk if adding that note to every single page on the docs is a solution...

maybe though