ruby-on-rails simple_form未捕获Rails Stimulus控制器

kmb7vmvb  于 2023-07-01  发布在  Ruby
关注(0)|答案(2)|浏览(123)

simple_form在Rails 7.1、Ruby 3.2.0、esbuild中没有捕获Stimulus的标记。或者我的html.erb有问题
更新:我已经改变了这一点,以反映我现在看到的问题(之前我认为这是一个刺激问题)。
两种不同的行动。一个是副本,另一个应该在下拉菜单中拾取onchange。第一个行得通,第二个不行。

<div data-controller="location-select">
  <span>Simple Stimulus demo  <%= link_to "based on", "https://stimulus.hotwired.dev/handbook/building-something-real" %></span>
  <input data-location-select-target="source" type="text" value="This will be copied" readonly>
  <button data-action="location-select#copy">Copy to Clipboard</button>
  <span>Copying to clipboard above works. But selecting a location below does not call method locationSelected</span>

  <%= form.association :location,
      label_method: :address,
      collection: Location.all.order(:address),
      value_method: :id,
      include_blank: true,
      data: { action: "onchange->location-select#locationSelected" }
  %>
</div>

// app/javascript/controllers/location_select_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "source" ] // for copy demo
  connect() {
    console.log("location_select_controller connect method")
  }

  locationSelected() {
    console.log("SUCCESS location_select_controller locationSelected method. SUCCESS) // never happens
  }

 copy(event) {
   event.preventDefault() 
   navigator.clipboard.writeText(this.sourceTarget.value)
   console.log(`location_select_controller copy method and \"${this.sourceTarget.value}\" was copied to clipboard`)
 }
}

生成的HTML

<div data-controller="location-select">
    <span>Simple Stimulus demo  <a href="https://stimulus.hotwired.dev/handbook/building-something-real">based on</a></span>
    <input data-location-select-target="source" type="text" value="This will be copied" readonly>
    <button data-action="location-select#copy">Copy to Clipboard</button>
    <span>Above works. But selecting a location below does not call method locationSelected</span>
  
    <div class="input select required year_location field_without_errors"><label class="select required" for="year_location_id"><abbr title="required">*</abbr> Location</label><select class="select required" name="year[location_id]" id="year_location_id"><option value="" label=" "></option>
<option selected="selected" value="188">10 N Main St</option>
<option value="234">1000 E 7th St</option>
etc.
</div>

value是位置ID
我要么做错了什么,要么simple_form没有在HTML中放入data-action …。所以问题是,如何编写html. erb。
下面是需要的,但我认为上面指出了问题的根源。我只是在深入研究以下内容时发现了这个问题。换句话说,其余的可能被忽略。
data: { controller: "snippet-draw", action: "change->snippet-draw#connect" }被忽略。事实上,删除这条线并没有改变什么。页面仍然工作;调用connect方法
希望:doc在选中时更新。在正常使用中,文档(图像)显示在页面上,并在其上选择一个区域。只有该区域可以显示在其他页面上。该单据显示在页面上,以便与现有单据一起进行“编辑”;但不会更改新选择的文档,也不会更改“新”项目。(该表被命名为“年”,因为它们与日期相关。表名的选择令人困惑。)
html.erb用于编辑和新建

<%= simple_form_for @year do |form| %> 
  <div data-controller="snippet-draw">
    <%= form.association :doc, 
           label_method: :id_page, 
           collection: Doc.all, 
           value_method: :id, 
           label: "Select document(s) that support this",
           class: "fw-bold",
           data: { controller: "snippet-draw", action: "change->snippet-draw#connect" }
    %>

app/javascript/controllers/snippet_draw_controller.js。这应该只与连接方法的前几行相关,因为此时应该知道更改(docURL)。

import { Controller } from "@hotwired/stimulus"

import Map from 'ol/Map';
import View from 'ol/View';
import Polygon from 'ol/geom/Polygon';
import Draw, {createRegularPolygon, createBox} from 'ol/interaction/Draw';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import ImageLayer from 'ol/layer/Image';
import {OSM, Vector as VectorSource} from 'ol/source';
import Static from 'ol/source/ImageStatic';
import Projection from 'ol/proj/Projection';
import {getCenter} from 'ol/extent';

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

  static values = {
    url: String,
    width: Number,
    height: Number,
  }

  connect(){
    const docURL = this.urlValue;
    const docWidth  = this.widthValue;
    const docHeight = this.heightValue;
    const extent = [0, 0, docWidth, docHeight];
    console.log(`44. ${Date.now()} docURL:  ${docURL}`)
  
    let source = new VectorSource(); 

    let drawLayer = new VectorLayer({
      source: source
    });    

    let projection = new Projection({
      units: 'pixels',
      extent: extent,
    });

    let docSource = new Static({
      attributions: '',
      url: docURL,
      projection: projection,
      imageExtent: extent
    });

    let docLayer = new ImageLayer({ 
      source: docSource,
      extent: extent,
    });

    let staticView = new View({
      projection: projection,
      center: getCenter(extent),
      zoom: 2.5, 
      maxZoom: 4,
    });

    let map = new Map({
      layers: [docLayer],
      target: 'snmap',
      view: staticView,
      extent: extent,
    });

    function getSnippetCoordinates(coordsOutputTarget) {
      let draw = new Draw({
        source: source,
        type: 'Circle',
        geometryFunction: createBox()
      });
      map.addInteraction(draw);
       draw.on('drawend', function(event) {
           let boxCoords = event.feature.values_.geometry.flatCoordinates;
         let boxCoordsStringified = JSON.stringify(boxCoords);
         let boxCoordsStringifiedParsed = JSON.parse(boxCoordsStringified);
         var truncCoords = function(element,index,array){
           return Math.trunc(element);
         };
         boxCoordsStringifiedParsedMap = boxCoordsStringifiedParsed.map(truncCoords);
         document.getElementById('year_snippet_coords').innerHTML = boxCoordsStringifiedParsedMap; 
       });
       }

    const someText = "Drawn coordinates will appear here after drawing a rectangle. (From snippet_draw_controller:113. Dev only since don't get added to dB";
    this.snippetCoordsTarget.textContent = `${someText}`;
    getSnippetCoordinates(this.snippetCoordsTarget);
    } // end connect    
  }

浏览器控制台加载年份/xxx/edit

36. docURL: application-….js:76185 
44. 1687813148832 docURL:  application-….js:76180 
36. docURL: /rails/active_storage/blobs/redirect/some.jpg application-….js:76185 
44. 1687813148836 docURL:  /rails/active_storage/blobs/redirect/some.jpg

选择新单据选择时,控制台无变化。我也不明白为什么connect被调用两次

nimxete2

nimxete21#

根据刺激生命周期,连接方法适用于Anytime the controller is connected to the DOM
所以当这一行呈现时,已经调用了connect方法

<div data-controller="snippet-draw">

所以我的建议是,首先不要使用connect关键字作为方法名,然后你可以调试问题。

bvjveswy

bvjveswy2#

input_html: { data: { action: "change->location-select#locationSelected" }}
替换
data: { action: "onchange->location-select#locationSelected" }
我以为我已经回答过了。在SO处发现溶液。
现在来谈谈主要问题。

相关问题