Bind properties from inside of component init() method

[tjodalv]

Hi

I would like to bind Alpine's component properties in the component init() method. Do not now if this is somehow possible, but it would be cool if we could do that. Look at the example:

Alpine.data('ComponentName', function () {
    return {
        init() {
            // This is where I would like to bind properties to element on which this component
           // is called upon with some 'magic' $bind or maybe like this.$root.bind(this.componentProps)
            this.$bind = this.componentProps
        },
        componentProps: {
            ['x-html']: 'render'
        },
        render() {
            return '<a href="#">this is component template</a>'
        }
    }
})

And then using it in HTML like this

<div x-data="ComponentName()"></div>

What do you think about that?

[SimoTod]

You are after Alpine.bind. See https://codepen.io/SimoTod/pen/RweMYjG

[ekwoka]

Alpine.bind(this.$root, this.componentProps.bind(this))

[tjodalv]

Thank you guys both. That is what I was looking for. Maybe you should update the docs to explain to the readers that when using Alpine.bind, for the first param, you can use function name that will be called on the element you want to bind properties or you can pass an element you want to bind properties onto. That is important feature, because enables developers to create standalone components. Once again, thanks!

[SimoTod]

No worries. We are not maintaining the repo ourselves but the docs are open-source if you want to send a PR.