当 select 更改时替换嵌套表单项？ （导轨 / AJAX / StimulusJS）

Question

我有一个带有预填充嵌套表单的标准 Rails 应用程序。 我在父 model 上有一个 select，当用户更改嵌套项目的上下文并且需要清除并重新填充它们时。

我一直在使用 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 function 中。 我得到 Uncaught TypeError: Cannot read property 'innerHTML' of undefined errors。 我确信这是一个变量 scope 类型问题。 Javascript 不是我在这里的强项，所以我怀疑我在这里遗漏了一些很容易修复的小东西。

相关问题：

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

Answer 1

您应该使用粗箭头来保留 scope 所以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) => {
  }
})

有关其他 controller 代码结构，请参阅更详细的示例。