Possible to x-bind multiple attributes with object?

[surgiie]

Is there a way to bind multiple attributes using an object? So something like
<span x-bind="{ drink: 'soda', food: 'pizza' }" >...</span>

compiles to:

<span drink="soda" food="pizza">...</span>

I assume its not supported since my attempts show null="[object Object]". And in alpine 3, it doesnt seem to compile down/render to anything after the page loads.

Is there plans to add this support or is there a current/alternative way to accomplish this?

[KevinBatdorf]

Would be shorter to do it like:

<span :drink="drink" :food="food">...</span>

Is the intent to pass in an object literal?

I think a better feature idea would be to auto bind if no expression is passed in, so you could write:

<div x-data="{ drink: 'soda', food: 'pizza' }">
  <span :drink :food>...</span>
</div>

But after typing that out and looking at the preview, I don't necessarily like it. Feels more natural to me to keep it explicit.

[KevinBatdorf]

You can probably accomplish this by writing a simple plugin. Look here: https://alpinejs.dev/advanced/extending

and maybe have it like: <span x-bind-object="{ // code }">

If you start something I can help with it if you get stuck, just share a demo from codepen or somewhere

[surgiie]

Yeah figured that would be the case, just wanted to double check this wasn't already supported before i went down this route. Thanks for the clarification.

[KevinBatdorf]

So I was messing around with Alpine a bit tonight and decided to write something to solve this. I'm not entirely sure of your use case so this is more like a start. It probably doesn't cover many cases so just be aware of that

document.addEventListener('alpine:init', () => {
  Alpine.directive('bind-object', 
    (el, { expression }, { Alpine: { mutateDom }, evaluateLater, effect, cleanup }) => {
    
    const evaluate = evaluateLater(expression)
    const handle = (action, values) => {
      Object.entries(values).forEach(item => {
        action === 'remove'
          ? el.removeAttribute(item[0])
          : el.setAttribute(item[0], item[1])
      })
    }
    
    effect(() => evaluate(result => mutateDom(() => handle('add', result))))
    cleanup(() => evaluate(result => handle('remove', result)))
    
  })
})

you would use it like:

<div x-data="{ menu: { drink: 'soda', food: 'pizza' } }">
  <div x-bind-object="menu"></div>
</div>

which would render like:

<div x-bind-object="menu" drink="soda" food="pizza"></div>

and update it like:

<button @click="menu = { drink: 'water', food: 'pizza' }">change drink</button>

I put a demo here: https://codepen.io/KevinBatdorf/pen/bGqZzJE?editors=1011

[surgiie]

@KevinBatdorf Came up with something nearly identical, but tried yours out and works great. Personally would like to see this be supproted natively by alpine but not the end of the world to manage a custom directive. Do you happen to know if there is a reason why this is chosen to not be supported? I figured alpine would just do this as the default behavior if no value (part after colon) is not present. ie x-bind vs x-bind:value

[KevinBatdorf]

Could it be done with x-spread maybe? I didn't even think to check that as I've never used x-spread

What did you come up with?