我有一个标准的 Rails 应用程序,带有预先填充的嵌套表单。我在父模型上有一个选择,当用户更改嵌套项目的上下文时,需要清除并重新填充它们。
我一直在使用 StimulusJS 并且想要这样的东西:
import { Controller } from "stimulus"
export default class extends Controller {
static targets = [ "budgetCode", "body", "template" ]
connect() {
}
budget_code_changed(event) {
document.getElementById('budget_items').getElementsByTagName('tbody')[0].innerHTML = '';
const url = '/budget_code_items/budget?budget_code_id=' + this.budgetCodeTarget.value;
Rails.ajax({
url: url,
success: function(data) {
let row;
var content = this.templateTarget.innerHTML
for (let i = 0; i < data.length; i++) {
this.bodyTarget.insertAdjacentHTML('beforeend', content)
}
}
})
}
}
我已经很接近了 - 当我更改选择时,行将被删除。我可以手动插入一个新行:
var content = this.templateTarget.innerHTML
this.bodyTarget.insertAdjacentHTML('beforeend', content)
因为我已经定义了新的行结构。
我遇到的问题似乎是在 Rails.ajax 函数中嵌入 Stimulus 调用。我收到 Uncaught TypeError: Cannot read property 'innerHTML' of undefined 错误。我确信这是一个变量范围类型问题。 Javascript 不是我的强项,所以我怀疑我在这里遗漏了一些可以轻松修复的小东西。
相关附带问题:
同时,在我的模板列单元格之一中,我需要添加一些文本并设置来自 Rails.ajax 调用数据的隐藏输入的值。我可能可以自己解决这个问题,但如果有人可以补充这个附带问题,我将不胜感激。
最佳答案
您应该使用粗箭头来保留范围,以便this
保持指向 Controller
Rails.ajax({
url: url,
type: 'GET',
success: (data) => {
// now this retains to the controller
}
})
顺便可以按如下方式传递参数
const url = '/budget_code_items/budget'
Rails.ajax({
url: url,
type: 'GET',
data: 'budget_code_id=' + this.budgetCodeTarget.value,
success: (data) => {
}
})
查看更详细example用于额外的 Controller 代码结构。
关于javascript - 选择更改时替换嵌套表单项? (Rails/AJAX/StimulusJS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58067783/