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被调用两次
2条答案
按热度按时间nimxete21#
根据刺激生命周期,连接方法适用于Anytime the controller is connected to the DOM
所以当这一行呈现时,已经调用了connect方法
所以我的建议是,首先不要使用
connect
关键字作为方法名,然后你可以调试问题。bvjveswy2#
input_html: { data: { action: "change->location-select#locationSelected" }}
替换
data: { action: "onchange->location-select#locationSelected" }
我以为我已经回答过了。在SO处发现溶液。
现在来谈谈主要问题。