Я хочу отправлять обновленную информацию о выборе цвета обратно в представление django каждый раз, когда цвет выбран до отправки формы

Использую HTMX с Alpine.js. Пытаюсь получить динамическое обновление от 'color' каждый раз, когда цвет нажимается на выборке цветов до отправки формы, я хочу отправить обновленное значение обратно в функцию просмотра. Я понимаю, что использование htmx.process() - это признанный способ поиска изменений в содержимом, которое добавляется в DOM вне обычного цикла htmx-запроса, но я все же хочу, чтобы работали htmx-атрибуты. Однако в приведенном ниже коде это все равно не работает.

<form method="post" hx-post="{% url 'generate_yarn_colorway' %}" hx-target="#result">
    {% csrf_token %}

    <div x-data="{ colors: [], color: '#ff0000', showHoverMessage: false, selectedItems: [], newItem: '' }"
         x-init="$watch('color', new_value => { htmx.process(htmx.find('#mycomponent')) })"
    >
        <label class="form-label" for="colorPicker">Colour: </label>
        <span x-text="color" id="update_colour"></span>
        <input class="form-control form-control-color col-md-2"
               type="color"
               list="presetcolors"
               id="colorPicker"
               name="colorPicker"
               x-model="color"
               @mouseover="showHoverMessage = true"
               @mouseleave="showHoverMessage = false"
               data-bs-toggle="tooltip"
               data-bs-placement="top"
        >
        <span x-show="showHoverMessage" class="text-gray-500">Choose colour.  Include main colour first.</span>
        <br>
        <datalist id="presetcolors"
                  x-data="{ colorOptions: ['#ff0000', '#FFA500', '#Ffff00', '#00ff00', '#0000ff', '#8F00FF', '#800080', '#FF00FF', '#00FFFF', '#4B0082','#40E0D0', '#Ffc0cb', '#964B00', '#FFFFFF', '#000000', '#808080'] }"
        >
            <template x-for="color in colorOptions" :key="color">
                <option x-text="color" x-bind:value="color"></option>
            </template>
        </datalist>
        <input id="mycomponent" type="text" name="color" x-model="color" hx-post="{% url 'update_color_description' %}" hx-trigger="changed">
        <!-- Button to add color -->
        <button class="btn btn-primary custom-btn btn-sm" type="button" @click="colors.push(color)">Add Colour</button>
        <br>
        {{ form|crispy }}
    
    </div>

    <div >
        <br>
        <button class="btn btn-primary custom-btn btn-sm" type="submit">Generate</button>
    </div>
</form>

Я попробовал заменить htmx.process(htmx.find('#mycomponent')) на console.log(new_value), и это работает, как и ожидалось, регистрируя каждый цвет в консоли как выбранный, и это значение я хочу отправлять обратно в функцию просмотра каждый раз. Таким образом, проблема, похоже, связана с htmx.process().

Вернуться на верх