Блог

Я пытаюсь избежать встроенного javascript и хотел бы преобразовать его в Alpine.js код. Есть ли способ переписать следующий фрагмент кода в Alpine.js?

 <script type="text/javascript">
  window.addEventListener('DOMContentLoaded', function () {
    const message = "Do you really want to remove the selected e-mail address?";
    const actions = document.getElementsByName('action_remove');
    if (actions.length) {
      actions[0].addEventListener("click", function (e) {
        if (!confirm(message)) {
          e.preventDefault();
        }
      });
    }
  });

  document.addEventListener('DOMContentLoaded', function () {
    $('.form-group').removeClass('row');
  })

</script>
 

Вот полный контекст (я работаю с шаблонами Django):

 {% extends "account/base.html" %}

{% load tailwind_filters %}

{% load crispy_forms_tags %}

{% block head_title %}
Account
{% endblock %}

{% block inner %}
<h1>E-mail Addresses</h1>

{% if user.emailaddress_set.all %}
<p>The following e-mail addresses are associated with your account:</p>

<form action="{% url 'account_email' %}" class="email_list" method="post">
  {% csrf_token %}
  <fieldset class="blockLabels">

    {% for emailaddress in user.emailaddress_set.all %}
    <div class="radio">
      <label for="email_radio_{{forloop.counter}}" class="{% if emailaddress.primary %}primary_email{%endif%}">

        <input id="email_radio_{{forloop.counter}}" type="radio" name="email" {% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked" {%endif %} value="{{emailaddress.email}}" />

        {{ emailaddress.email }}
        {% if emailaddress.verified %}
        <span class="verified">Verified</span>
        {% else %}
        <span class="unverified">Unverified</span>
        {% endif %}
        {% if emailaddress.primary %}<span class="primary">Primary</span>
        {% endif %}
      </label>
    </div>
    {% endfor %}

    <div class="form-group">
      <button class="secondaryAction btn btn-primary" type="submit" name="action_primary">Make Primary</button>
      <button class="secondaryAction btn btn-primary" type="submit" name="action_send">Re-send Verification</button>
      <button class="primaryAction btn btn-primary" type="submit" name="action_remove">Remove</button>
    </div>

  </fieldset>
</form>

{% else %}
<p><strong>Sad news:</strong>You currently do not have any e-mail address set up. You should add an e-mail address so you can receive notifications, reset your password, etc.</p>
{% endif %}


<h2>Add E-mail Address</h2>
<form method="post" action="{% url 'account_email' %}" class="add_email">
  {% csrf_token %}
  {{ form|crispy }}
  <button class="btn btn-primary" name="action_add" type="submit">
    Add E-mail
  </button>
</form>

{% endblock %}


{% block inline_javascript %}
{{ block.super }}
<script type="text/javascript">
  window.addEventListener('DOMContentLoaded', function () {
    const message = "Do you really want to remove the selected e-mail address?";
    const actions = document.getElementsByName('action_remove');
    if (actions.length) {
      actions[0].addEventListener("click", function (e) {
        if (!confirm(message)) {
          e.preventDefault();
        }
      });
    }
  });

  document.addEventListener('DOMContentLoaded', function () {
    $('.form-group').removeClass('row');
  })

</script>
{% endblock %}

 

Вы можете попробовать что-то вроде этого: инициализировать родительский элемент формы с x-data помощью и установить переменную состояния confirmMsg null равным .

При отправке формы вы предотвращаете фактическую отправку @submit.prevent и проверяете, было ли установлено сообщение подтверждения ( confirmMsg ). Если да, вы предлагаете пользователю подтвердить установленное сообщение. Если пользователи подтвердят, вы сбросите значение confirmMsg null и отправите форму с $el.submit() помощью .

На кнопках вы можете просто установить соответствующие confirmMsg @click = "confirmMsg = 'Are you sure?'" значения .

Вот пример кода:

 <script src="//unpkg.com/alpinejs" defer></script>

<form
  x-data="{confirmMsg: null}"
  @submit.prevent="
    if (confirmMsg amp;amp; !confirm(confirmMsg)) return; 
    confirmMsg = null; 
    alert('Submitting form...'); $el.submit()"
>
  <button
    @click="confirmMsg = 'Do you really want to remove the selected e-mail address?'"
    type="submit"
    name="action_remove"
  >
    Remove
  </button>
</form>