Javascript 嵌套刺激作用域/控制器问题/HTML5模板标记

我有一个带有嵌套关联的基本Rails应用程序，我正在执行一个标准的“行项目”类型视图，在该视图中，我动态地添加和删除模板标记中的行。我有一个select，它触发AJAX调用来替换所有嵌套的行选择（上下文已更改）。支出控制器处理整个表单，嵌套表单控制器在其他页面上用于处理行的添加和删除：

<div data-controller="expenditure nested-form">

  <select data-target="expenditure.budget" data-action="change->expenditure#update_related"></select>

  <table>
    <thead></thead>
    <tbody>
      inserted rows... 
      <tr>
        <td>
          <select data-target="expenditure.budgetItemSelect"></select>
        </td>
      </tr>

    <template data-target="nested-form.template">
      <tr data-new_record="true">
        <td>
          <select data-target="expenditure.budgetItemSelect"></select>
        </td>
      </tr>
    </template>

    </tbody>
  </table>  

</div>

插入的行。。。

它很好用。我可以添加和删除行，如果我更改

支出。预算

选择所有

支出。预算项选择

目标将更新，模板内的目标除外。这就好像控制器的整个范围都缺少它一样。我以前将它们嵌套，但现在将它们放在同一个div

data controller=“expense nested form”

中进行双重检查，但仍然不起作用。检查拼写，甚至尝试删除

数据target=“nested form.template”

。浏览器控制台中没有错误。我是不是漏掉了什么明显的东西

更新

嗯。。。似乎

模板

标记是只读的，而不是DOM的一部分，这就是失败的原因

---

我管理了一次黑客攻击，替换了整个模板的内容，但这似乎破坏了添加/删除行的控制器。HTML5中的

标记似乎有问题

我有一个解决办法，但很难看

<div data-controller="expenditure nested-form">

  <select data-target="expenditure.budget" data-action="change->expenditure#update_related"></select>

  <table>
    <thead></thead>
    <tbody>
      inserted rows... 
      <tr>
        <td>
          <select data-target="expenditure.budgetItemSelect"></select>
        </td>
      </tr>

    <template id="expenditure_items_template">
      <tr data-new_record="true">
        <td>
          <select data-target="expenditure.budgetItemSelect"></select>
        </td>
      </tr>
    </template>
    <script type="text/template" data-target="nested-form.template" id="expenditure_items_template_script">
    </script>

    </tbody>
  </table>  

</div>

新建\模板.getElementById（'支出\支出\项目\属性\新建\记录\预算\项目\ id'）。innerHTML=select.innerHTML

//清除新脚本占位符 document.getElementById（“支出项目模板脚本”）.innerHTML=“”

//将新更新的模板设置到脚本标记中 document.getElementById（“支出项目模板脚本”）.appendChild（新模板）

我基本上有两个模板-一个

保存原始HTML，另一个

与刺激一起工作。

注意

需要在表单标签的外侧。

// find the template
var template = document.getElementById("expenditure_items_template");

// load the template contents
var new_template = document.importNode(template.content, true);

// replace the select with my new content (off screen)