将内联 javascript 转换为 Alpine.js

Question

我试图避免内联 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 %}

Answer 1

您可以尝试这样的操作：用 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 && !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>

将内联 javascript 转换为 Alpine.js

Converting inline javascript to Alpine.js

javascript

alpine.js

这是完整的上下文（我正在使用 Django 模板）：