在选择更改时替换嵌套的表单项？(Rails / AJAX / StimulusJS)

Question

我有一个标准的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)
          }

      }
    })

      }

 }

当我更改select时，行将被移除。我可以用以下方式手动插入一个新行：

    var content = this.templateTarget.innerHTML
    this.bodyTarget.insertAdjacentHTML('beforeend', content)

因为我用新的行结构定义了一个。

我似乎有一个问题，就是在Rails.ajax函数中嵌入刺激调用。我得到了未定义的TypeError:无法读取属性'innerHTML‘的未定义错误。我确信这是一个可变范围类型的问题。Javascript不是我的强技能，所以我怀疑我在这里遗漏了一些很容易修复的小东西。

相关的边问题：

同时，在我的模板列单元格中，我需要添加一些文本，并从Rails.ajax调用的数据中设置隐藏输入的值。我很有可能自己解决这个问题，但是如果有人能增加这个问题的话，我们将不胜感激。

Answer 1

您应该使用fat箭头来保留作用域，以便this保持指向控制器。

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) => {
  }
})

有关附加控制器代码结构，请参阅更详细的示例。