Better way to link dirty attribute with other HTML elements

[gschurck]

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]

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.