search

adamghill / django-unicorn

The magical reactive component framework for Django ✨
https://www.django-unicorn.com
MIT License
2.33k stars 118 forks source link

Better way to link dirty attribute with other HTML elements #524

Open gschurck opened 1 year ago

gschurck commented 1 year ago

I have a search bar that mades request automatically on change with unicorn:model.

<div class="control has-icons-left is-large" unicorn:dirty.class="is-loading" id="search-div">
    <input type="text" class="input is-large" unicorn:model.debounce-200="search" unicorn:key="search"
           unicorn:dirty.class="is-loading"
           placeholder="{{ search_phrase_placeholder }}" id="meme-name">
    <span class="icon is-small is-left">
                <i class="fas fa-search"></i>
        </span>
</div>

I would like to set the class is-loading to the HTML div parent of the input element, to add a loading spinner while the request is processed on backend. But with unicorn:dirty, I can only set a class on the input attribute.

So as a workaround solution I found this, and it works perfectly.

But it could be easier if we could target a specific id with dirty, to set the class wherever we want.

Is there any better solution ? Thanks.

adamghill commented 1 year ago

Hmm, I do something sort of similar in this todo component, but it's with loading. If you can fork or make a small reproducible repo I can see why this might not be working as expected.