在Stimulus控制器中記憶Bootstrap5模態

我在部分定義的模態中有一個表單：

<!-- app/views/events/new_event_modal.html.erb -->
<div data-controller="events--form">  
  <div class="modal fade" id="new-event-modal" tabindex="-1" aria-labelledby="new-event-label" aria-hidden="true" data-events--form-target="modal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title text-light" id="new-event-label">Ajouter un évennement</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
        </div>
        <div class="modal-body">
          <%= render partial: 'events/form',
                     locals: { event:     event,
                               calendars: calendars,
                               users:     users } %>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- app/views/events/_form.html.erb -->
<%= turbo_frame_tag dom_id(event) do %>
  <div class="container text-light">
    <%= form_with(model: event || Event.new) do |form| %>
      
      <!-- form's content omitted -->

      <div class="actions modal-footer">
        <%= form.submit class: 'btn btn-primary' %>
      </div>
    <% end %>
  </div>
<% end %>

由于它是一個日歷應用程式，我使用用戶選擇的日期預先填寫表單，然后顯示模式。這是通過一些“ ”圖示和一個刺激控制器完成的：

# app/views/simple_calendar/_mounth_calendar.html.erb
# each day has this icon
<%= image_tag 'add.svg',
  size: '20x20',
  alt:  ' ',
  data: {
    action: 'click->events--form#configure_and_show_modal',
    date:   day.strftime('%d/%m/%Y')
  }
%>

// app/javascript/packs/controllers/events/form_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "modal" ]

  connect() {
    this.element.addEventListener('turbo:submit-end', (event) => {
      if (event.detail.success) {
        this.hide_modal();
      }
    });
  }

  configure_and_show_modal(event) {
    const date = event.target.dataset.date;

    this.configure_flatpickr(date);
    this.show_modal();
  }

  configure_flatpickr(date) {
    flatpickr("[data-behavior='flatpickr']", {
      altInput:      true,
      altFormat:     'd F Y',
      altInputClass: 'form-control input text-dark',
      dateFormat:    'd/m/Y H:i',
      defaultDate:   date,
      mode:          'range',
    })
  }

  show_modal() {
    this.modal.show();
  }

  hide_modal() {
    this.modal.hide();
  }

  get modal() {
    return new bootstrap.Modal(this.modalTarget);
  }
}

問題是get modal()每次都實體化一個新物件，因此在新創建的物件上呼叫hide_modal()呼叫.hide()并且不會隱藏顯示的模式。

我知道我需要某種記憶，但我不知道如何在刺激控制器上實作它。

使用 ruby?? 我們會做類似的事情：

@modal ||= get_modal

誰能指導我朝這個方向發展？

uj5u.com熱心網友回復：

實作此目標的一種簡單方法是將模態實體存盤在類實體上。

這樣，您仍然可以從您的 getter 訪問它，但不必每次都重新創建它。

這_modalInstance只是一個約定，下劃線表示它應該是私有的。但是，如果控制器以某種方式斷開連接并且必須重新連接已顯示的模式，這可能會導致問題。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "modal" ]

  get modal() {
    if (this._modalInstance) return this._modalInstance;
    const modal = new bootstrap.Modal(this.modalTarget);
    this._modalInstance = modal;
    return this._modalInstance;
  }
}

實作這一點的更好方法是使用 Bootstrap JavaScript API。

bootstrap.Modal.getOrCreateInstance(myModalEl)

https://getbootstrap.com/docs/5.1/components/modal/#getorcreateinstance

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "modal" ]

  get modal() {
    return bootstrap.Modal.getOrCreateInstance(this.modalTarget);
  }
}

uj5u.com熱心網友回復：

這是我實作記憶的方式：

get modal() {
  if (this._modal == undefined) {
    this._modal = new bootstrap.Modal(this.modalTarget);
  }
  return this._modal
}

標籤：javascript 轨道上的红宝石 推特引导 刺激

上一篇：在小型設備中將一行影像轉換為輪播

下一篇：在ia列后綴后給出3列