使 Rails 7 刺激 controller 動態處理值

Question

雖然可以安裝leaflet並生成 map，

./bin/importmap pin leaflet

手動添加leaflet.css文件到assets/stylesheets和 images 到public/images目錄，

刺激 controller 設置為 static 值。

import { Controller } from "@hotwired/stimulus"

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

  connect(){
    import("leaflet").then( L => {
      this.map = L.map(this.placeholderTarget,{zoomDelta:0.5,zoomSnap:0.5}).setView([ 47.1960, 9.023 ], 10);

      var base_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(this.map);
      var marker1 = L.marker([47.4, 8.9]).addTo(this.map);
      var marker2 = L.marker([47.0, 9.3]).addTo(this.map);
    });
  }

  disconnect(){
    this.map.remove()
  }

}

坐標將位於頁面的其他位置。

假設文檔將具有 ' id '、'lon_1'、'lat_2'、'lon_2'、'zoom'、'lat_marker_1'、'lon_marker_1'、'lat_marker_2'、'lon_marker_2' 的 ID，那么應該如何轉換這個 controller

Answer 1

這是一個 XY 問題。 它說對於幾乎所有編程語言/框架，如果您使用以_n結尾的標識符（變量名稱、id、屬性等），那么您做錯了，應該使用列表/數組/映射/散列/對象代替。

如果你想通過 DOM 傳遞一堆 Map 標記，只需使用一個元素，如列表和數據屬性：

<ul id="cities">
  <li data-lat="40.781944" data-lon="-73.966111">New York</li>
  <li data-lat="19.076111" data-lon="72.87751">Mumbai</li>
  <li data-lat="50.45" data-lon="30.523333">Kyiv</li>
</ul>

如果您在頁面上以表格的形式顯示相同的數據，這很有意義。 否則，您可能需要考慮設置一條路由，將數據提供為 JSON。

如果您願意，也可以像vue-leaflet 那樣使用自定義元素。

如果您隨后想將這些標記添加到 map，您只需循環遍歷元素：

let cities = document.getElementById('cities');
for (const city of cities.children) {
  let marker = L.marker([city.dataSet.lat, city.dataSet.lon]);
  marker.addTo(this.map);
}

請記住，您不必為 DOM 中的所有內容分配 id，並且像那樣構建 JS 並不是一個好方法。